事件的截获

最新推荐文章于 2024-11-01 13:37:40 发布

weixin_33827965

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量110

点赞数

文章标签： javascript ViewUI

1.事件截获原理

利用事件的捕获阶段，添加事件。

再利用触发事件元素(e.target)来判断(根据一定的标识或者某些特征)是否是我们需要劫持的dom。

2.具体拦截

这里使用id作为一个判断根据，真实场景中肯定不是这样的。

这里的特征是需要根据一定的规则去寻找的。(这里只是为了演示原理)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>118boys</title>
</head>
<body>

<div style="width: 200px;height: 200px;border:1px solid" id="warp">
    <div style="width: 100px;height: 100px;border:1px solid" id="ok">可疑目标</div>    
</div>


</body>
<script type="text/javascript">
    
    var warp = document.getElementById('warp'),
        dom = document.getElementById('ok');
    

    dom.addEventListener('click', function(){
        console.log("可疑目标")
    },false)
    
    warp.addEventListener('click', function(e){

        var e = event || window.event,
            target = e.target || e.srcElement;
        if(target.getAttribute('id') === 'ok'){
            console.log('劫持id=ok的dom,成功!')
            console.log('触发事件元素(e.target)与事件绑定元素(e.currentTarget) :' + e.target == e.currentTarget)

            //处理拦截到的可疑目标
            
        }
    },true)


</script>
</html>