首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS高级拖动技术 setCapture,releaseCapture

<script type=”text/javascript”> <!– window.οnlοad=function(){ objDiv = document.getElementById(‘drag’); drag(objDiv); }; function drag(dv){ dv.οnmοusedοwn=function(e){ var d=document; e = e || window.event; var x= e.layerX || e.offsetX; var y= e.layerY || e.offsetY; //设置捕获范围 if(dv.setCapture){ dv.setCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); } d.οnmοusemοve=function(e){ e= e || window.event; if(!e.pageX)e.pageX=e.clientX; if(!e.pageY)e.pageY=e.clientY; var tx=e.pageX-x; var ty=e.pageY-y; dv.style.left=tx; dv.style.top=ty; }; d.οnmοuseup=function(){ //取消捕获范围 if(dv.releaseCapture){ dv.releaseCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } //清除事件 d.οnmοusemοve=null; d.οnmοuseup=null; }; }; } //–> </script>

setCapture 的意思就是设置一个对象的方法被触发的范围,或者作用域。 如果不设置,则div只在当前窗口内被触发。如果设置,则在整个浏览器范围内被触发,也就是可以拖到浏览器外面

01
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    javascript当中冒泡(event bubble)用法

    9.冒泡(event bubble) 缺省情况下,当几个元素重合,事件从最上层元素开始往下层元素传播。 例 9.1(bubbleIEFF.html) <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function docClick(event) { var event = event || window.event; alert("IE和FF一样:外面文档:"+event.type); } //document.captureEvents(Event.CLICK); document.onclick = docClick; </script>

    缺省情况下,当几个元素嵌套重合,事件从最上层元素开始往下层元素传播。 例 9.2(bubble1currentTargetsrcElementIEFF.html) <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function gotClick(event, who) { /* 1) 在ie中没有currentTarget,我们只能用下面的方法:来仿真火狐的效果。 2)马克-to-win:event.target是最上层的元素,event.currentTarget是最底层的元素 */ var event = event||window.event; var eTarget =event.srcElement||event.target; var eCurrentBottomTarget =event.srcElement||event.currentTarget; if (window.navigator.userAgent.indexOf("MSIE") >= 1) 更多请见:https://blog.csdn.net/qq_43650923/article/details/102211582

    05

    浮动广告代码

    <%@ Page Language=”vb” AutoEventWireup=”false” Codebehind=”floatadv.aspx.vb” Inherits=”AdaptTest.floatadv”%> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <title>测试中…</title> <META http-equiv=”Content-Type” content=”text/html; charset=gb2312″> <meta content=”Microsoft Visual Studio .NET 7.1″ name=”GENERATOR”> <meta content=”Visual Basic .NET 7.1″ name=”CODE_LANGUAGE”> <meta content=”JavaScript” name=”vs_defaultClientScript”> <meta content=”http://schemas.microsoft.com/intellisense/ie5” name=”vs_targetSchema”> <LINK href=”AdaptTest.css” type=”text/css” rel=”stylesheet”> <STYLE type=”text/css”>#floater { Z-INDEX: 10; LEFT: 500px; VISIBILITY: visible; WIDTH: 220px; POSITION: absolute; TOP: 146px } </STYLE> </HEAD> <body>

    <form id=”Form1″ method=”post” runat=”server”>

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    werer

     

     

     

    <FON

    02

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券