html5 拖曳

最新推荐文章于 2024-04-07 16:58:37 发布

BoolBear

最新推荐文章于 2024-04-07 16:58:37 发布

阅读量578

点赞数

分类专栏： html/js/css 文章标签： dataTransfer

html/js/css 专栏收录该内容

24 篇文章

订阅专栏

preventDefault()阻止特定事件的默认行为

要阻止特定事件的默认行为，可以使用preventDefault()方法。例如，链接的默认行为就是在被单击时会导航到其href特性指定的URL。如果你想阻止链接导航这一默认行为，那么通过链接的onclick事件处理程序可以取消它，如下面的例子所示：

var link = document.getElementById("myLink");
link.onclick = function (event) {
    event.preventDefault();
};

只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。

dataTransfer

虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽问题，并且也没有实现数据的交换。为了实现数据的交换，IE5引入了dataTransfer对象。dataTransfer对象是事件对象的一个属性，用于从被拖拽元素相放置目标传递字符串格式的数据。因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中，可以使用这个对象的属性和方法来完善拖放功能。

　　dataTransfer对象有两个主要的方法：getData()方法和setData()方法。从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是”text”或”URL”。