跨浏览器事件Event对象代码

最新推荐文章于 2024-07-25 08:06:37 发布

黛梨

最新推荐文章于 2024-07-25 08:06:37 发布

阅读量405

点赞数

分类专栏：代码示例 javascript

本文链接：https://blog.csdn.net/pedrojuliet/article/details/53149649

版权

javascript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

代码示例

11 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何处理IE和DOM事件对象的差异，通过映射方式实现跨浏览器的Event对象兼容，确保在不同环境下都能正常访问事件信息。

摘要由CSDN通过智能技术生成

虽然IE的事件对象与DOM的事件对象存在差异，但是IE事件对象中所包含的信息和能力，与DOM事件对象是相同的，只是表现形式不同而已，通过映射的方式，我们可以实现兼容IE和DOM事件对象的事件对象

<!doctype html>
<html lang="en">

<head>
    <metacharset="UTF-8">
    <title>Document</title>
    <styletype="text/css">
       #drop{
           width: 300px;
           height: 200px;
           background-color: #ff0000;
           padding: 5px;
           border: 2px solid #000000;
       }
       #item{
           width: 100px;
           height: 100px;
           background-color: #ffff00;
           padding: 5px;
           margin: 20px;
           border: 1px dashed black;
       }
       *[draggable = true]{
           -moz-user-select: none;
           -webkit-user-select: none;
           cursor: move;
       }
    </style>
</head>
<body>
<div>
    <p>将金黄色的小方块拖到红色的大方块中，不兼容IE7及以下浏览器，兼容主流浏览器！</p>
</div>
<div id="item" draggable="true"></div>
<div id="drop"></div>
<script type="text/javascript">
    function listenEvent(target,type,handler){
        if(target.addEventListener){//w3c
            target.addEventListener(type,handler,false);
        }else if(target.attachEvent){//IE
            type ="on" +type;
            target.attachEvent(type,handler);//IE
        }else{
            target["on" +type] =handler;
        }
    }
    //取消事件
    function cancelEvent(e){
        if(e.preventDefault){
            e.preventDefault();//w3c
        }else{
            e.returnValue =false;//IE
        }
    }
    //取消传递
    function cancelPropagation(e){
        if(e.stopPropagation){
            e.stopPropagation();//w3c
        }else{
            e.cancelBubble =true;//IE
        }
    }
    window.onload =function () {
        var target =document.getElementById('drop');
        listenEvent(target,'dragenter',cancelEvent);
        listenEvent(target,"dragover",dragOver);
        listenEvent(target,'drop', function (evt) {
            cancelPropagation(evt);
            evt =evt ||window.event;
            evt.dataTransfer.dropEffect ='copy';
            var id =evt.dataTransfer.getData('Text');
            target.appendChild(document.getElementById(id));
        });
        var item =document.getElementById('item');
        item.setAttribute("draggable",'true');
        listenEvent(item,'dragstart', function (evt) {
            evt =evt ||window.event;
            evt.dataTransfer.effectAllowed ='copy';
            evt.dataTransfer.setData('Text',item.id);
        });
    };
    function dragOver(evt){
        if(evt.preventDefault) evt.preventDefault();
        evt =evt ||window.event;
        evt.dataTransfer.dropEffect ='copy';
        return false;
    }
</script>
</body>
</html>

黛梨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨浏览器事件Event对象代码

虽然IE的事件对象与DOM的事件对象存在差异，但是IE事件对象中所包含的信息和能力，与DOM事件对象是相同的，只是表现形式不同而已，通过映射的方式，我们可以实现兼容IE和DOM事件对象的事件对象lang="en"> <metacharset="UTF-8"> Document <styletype="text/css"> #dr
复制链接

扫一扫

专栏目录