JavaScript操作DOM的那些坑

evt.dataTransfer.dropEffect = 'copy';

return false;

}

</script>

</body>

</html>

dataTransfer 对象

| 属性 | 描述 |

| ————- |:————-:|

| dropEffect | 设置或获取拖曳操作的类型和要显示的光标类型 |

PS：IE 浏览器在应用通配符的时刻，会把文档最开端的 html 的规范声明算作第一个元素节点。

| effectAllowed | 设置或获取数据传送操作可应用于该对象的源元素 |

| 办法 | 描述 |

| ————- |:————-:|

| clearData | 经由过程 dataTransfer 或 clipboardData 对象大年夜剪贴板删除一种或多种数据格局 |

document.getElementById('box').getAttribute('id');//获取元素的 id 值 
 
document.getElementById('box').id;//获取元素的 id 值 
 
document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值 
 
document.getElementById('box').mydiv//获取元素的自定义属性值， IE 不支撑非 
 
document.getElementById('box').getAttribute('class');//获取元素的 class 值，IE 不支撑 
 
document.getElementById('box').getAttribute('className');//非 IE 不支撑

| getData | 经由过程 dataTransfer 或 clipboardData 对象大年夜剪贴板获取指定格局的数据

| setData | 以指定格局给 dataTransfer 或 clipboardData 对象付与数据

HTML5拖拽的浏览器支撑

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支撑拖放

为了使元素可拖动，需把 draggable 属性设置为 true ：

<img draggable="true" />

| 事宜 | 描述 |

| ————- |:————-:|

| drag | 在拖动操作上 |

| dragenter | 拖动到目标上，用来决定目标是否接收放置

innerHTML 和 nodeValue

|drop | 放置产生

e.stopPropagation();//w3c

| dragleave| 拖动分开目标

|dragend | 拖动操作停止

上述代码的一些浏览器兼容性：

1.为了兼容IE，我们将`window.event`赋给 `evt`，其他浏览器则会精确将接收到的`event`对象赋给`evt`。

3.对于事沂攀类型，IE须要加`on + type`属性，而其他浏览器则不消

4.对于阻拦元素的默认事宜行动，下面是w3c和IE的做法：

e.preventDefault();//w3c

e.returnValue = http://developer.51cto.com/art/201707/false;//IE

5.对于撤消事宜传播，w3c和IE也有不合的处理机制：

e.cancelBubble = true;//IE

跨浏览器获取目标对象

//跨浏览器获取目标对象 
 
function getTarget(ev){ 
 
    if(ev.target){//w3c 
 
        return ev.target; 
 
    }else if(window.event.srcElement){//IE 
 
        	
			 8/10   首页 上一页 6 7 8 9 10 下一页 尾页	
			

　　推荐阅读
　　利用卷积自编码器对图片进行降噪
            【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！

            这周工作太忙，本来想更把 Attention tranlsation 写出来，但一向抽不出时光，等后面有时光再来写。我们这>>>详细阅读


本文标题：JavaScript操作DOM的那些坑
地址：http://www.17bianji.com/lsqh/36299.html
 1/2    1