如何让外面div超链接不影响内部的超链接a

最新推荐文章于 2022-04-25 15:56:22 发布

蓝色水

最新推荐文章于 2022-04-25 15:56:22 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/orichisonic/article/details/51374842

javascript 专栏收录该内容

112 篇文章

订阅专栏

本文介绍如何通过cancelBubble、stopPropagation及preventDefault方法阻止HTMLDOMEvent对象的事件冒泡与默认行为，并提供具体实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原来外面套div的超链接完全可以不影响内部的超链接或者div的onclick的超链接，只要阻止事件冒泡，先上理论：

1、cancelBubble（HTML DOM Event 对象属性） ：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。

2、stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

3、 preventDefault（HTML DOM Event 对象方法）通知浏览器不要执行与事件关联的默认动作。

例子：
    function stopBubble(e)  
    {  
        if (e && e.stopPropagation)  
            e.stopPropagation()  
        else 
            window.event.cancelBubble=true 
    }  

把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了

话说其实还有阻止事件默认行为：

功能：阻止事件默认行为

function stopDefault( e ) {

     // 阻止默认浏览器动作(W3C)

     if ( e && e.preventDefault ) {

         e.preventDefault();

     } else {

        // IE中阻止函数器默认动作的方式

        window.event.returnValue = false;

    }

    return false;

}

问题的理论基础知道，那这样用的方法其实就是外面的超链接继续是a href或者div的onclick来修改location.href,但是内部则在跳转的location.href之后要执行stopBubble事件。

效果结果如下：

这个外面的手机端的整行有一个超链接，里面的购买100元起是另一个超链接。