跳至主要內容

10. 拖拽事件

Harry Xiong大约 1 分钟Web 前端DOMBOM

拖拽事件

当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,如果不希望发生这个行为,可以通过return false来取消默认行为,但是对IE8及以下浏览器不起作用(并不是说IE8不支持使用return false来取消默认效果,只是不支持在拖拽时取消默认效果)

注意:

  • 使用addEventListener()方法绑定的响应函数,取消默认行为时不能使用return false,需要使用event事件对象通过event.preventDefault()方法来取消默认行为,但是IE8及以下浏览器不能支持该方法(包括addEventListener()方法),使用该方法会报错,所以在调用的时候需要使用:event.preventDefault&&:event.preventDefault();

  • **IE8中有setCapture()这一对鼠标按下相关事件进行捕获的方法,**当一个调用一个元素的setCapture()方法以后,这个元素将会把下一次所有的鼠标按下相关的事件捕获到自己身上,其他鼠标触发都会由这个元素执行(包含在网页外面点击),所以可以设置需要进行的行为对象在按下鼠标的时候捕获到所有的事件

当鼠标松开时,取消对事件的捕获,取消捕获用releaseCapture()方法

var Odiv=document.getElementById("Odiv");
Odiv.attachEvent("onmousedown",function(){
    Odiv.setCapture();
    Odiv.attachEvent("onmousemove",function(){
    console.log(123);
});
});
Odiv.attachEvent("onmouseup",function(){
    Odiv.releaseCapture();
    console.log(456);
});

注:

  • setCapture()和releaseCapture()必须成对出现

  • 其它浏览器一样不支持该方法,所以在调用的时候用 Odiv.setCapture&&Odiv.setCapture()Odiv.releaseCapture()&&Odiv.releaseCapture()