js 利用事件委托解决mousedown中的click

最新推荐文章于 2023-12-31 19:33:28 发布

weixin_33720078

最新推荐文章于 2023-12-31 19:33:28 发布

阅读量766

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/webSong/p/9234205.html

本文通过一个具体实例介绍如何使用事件委托来实现父元素mousedown事件与子元素click事件的联动。通过监听父元素的mousedown事件并利用event对象判断点击目标是否为子元素a，实现了模拟触发子元素click事件的功能。

有一个需求是这样的：

父元素div绑定一个mousedown事件，子元素a绑定一个click事件。

看解构：

<div id="nav">
        <a href="javascript:void(0);">点我</a>
    </div>

搜了很多相关的都没有解决办法，于是我想到了事件委托，在父元素被mousedown的时候，event对象里包含了很多有用的东西。其中target就是关键！

代码：

//原生js走起
const nav = document.querySelector('#nav');
    const a = nav.querySelector('a');
    a.addEventListener("click",function(e){
        alert("a被点了");
        //e.stopPropagation();
    });
    nav.addEventListener("mousedown",function(e){
        (e.target.tagName).toLowerCase() === 'a' ? a.click :alert('你点击的是父元素');        
    });

这样，只要判断到我们点击到区域有a标签，说明我点击到了它，然后模拟触发一次click，就完成了我的需求了。

转载于:https://www.cnblogs.com/webSong/p/9234205.html