鼠标拖拽时,选择文字问题
if()与if() else if()的区别?
if()要考虑顺序,写多个条件时,输出结果可能会多个,条件会同时执行,及考验写的顺序
if() else if()无需考虑顺序,写多个条件时,输出结果只能是1个,条件只会执行一个
H5新增获取元素的方法:
document.querySelectorAll() 因返回的是数组,所以()只能写( div(标签) .div(class))
document.querySelector() (获取的是单个元素)(如果是标签的话就只获取第一个)
()里面可以写 div(标签) .div(class) #div(id)
return false 阻止默认事件
问题:在拖拽元素的时候,如果元素内部加了文字和图片,拖拽效果会失灵?
解决办法:
兼容性:
标准浏览器: 阻止事件的默认行为;
ie低版本:采取setcapture() 全局捕获的方法;(为ie低版本特有)
setcapture()给一个元素添加了这个方法之后,无论我们在页面的哪个地方触发相同事件,都会触发这个元素;
拖拽效果失灵的原因:
浏览器会给文字和图片一个默认行为,当文字或图片被选中的时候,会有一个拖拽的效果,即使没有人为给他添加,所以当我们点击这个元素拖拽时,有可能,选中文字或图片转移浏览器天生给的那个行为,从而导致,我们写的那个拖拽的效果失灵;
怎么去解决:
在onmousedown下
if(div.setCapture){
div.setCapture()
} //ie低版本下当我们点击元素的时候,浏览器会把元素身上事件,全部转移给div,阻碍了文字和图片被选中的行为
else{
ev.preventDefault?ev.preventDefault():ev.returnValue=false;
} //标准浏览器直接把浏览器自动选中图片和文字的默认行为取消了
但是ie低版本的setCapture()这个方法有很霸道的一面:会把所有跟他相同的事件都捕获到,执行自己的事件
所以要在鼠标抬起的时候,执行另一个方法;取消全局捕获releaseCapture;
if(div.releaseCapture){
div.releaseCapture
}
(适用于ie低版本)