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

绝地灬酷狼 2022-08-22 03:54 149阅读 0赞

原来外面套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事件。

效果结果如下：

![Image 1][]

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

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 html的超链接标签 a

超链接标签的学习和所做知识梳理

蔚落/ 2024年05月06日 21:22/ 0 赞/ 89 阅读

相关超链接

基础知识定义：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的页面或者当前页面中的某个部分。语法： `<a href

怼烎@/ 2023年10月18日 21:04/ 0 赞/ 71 阅读

相关超链接的内部链接和外部链接

<a href="http://www.baidu.com">外部链接</a> <a href="a.html">内部链接</a> 第一个是外链接，链接到外部

水深无声/ 2023年10月03日 17:55/ 0 赞/ 57 阅读

相关超链接

1、图片链接和文字连接 <!DOCTYPE html> <html> <head> <meta charse

小鱼儿/ 2023年08月17日 16:10/ 0 赞/ 138 阅读

相关 `＜a＞＜/a＞`超链接不跳转

1. `<a></a>`超链接不跳转 <a href="javascript:void(0);" class="look" onclick="skipQuery

拼搏现实的明天。/ 2023年02月24日 03:59/ 0 赞/ 24 阅读

相关超链接的内部链接和外部链接

超链接可以分为内部链接和外部链接两种。内部链接是指网站内部文件之间的链接，而外部链接是指网站内的文件链接到站点内容外的文件。代码如下： ![在这里插入图片描述][wat

妖狐艹你老母/ 2022年12月11日 13:36/ 0 赞/ 304 阅读

相关 web超链接

关于网页设计的超链接代码，如下：  <!doctype html> <html lang="en"

梦里梦外;/ 2022年12月11日 13:36/ 0 赞/ 250 阅读

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

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

绝地灬酷狼/ 2022年08月22日 03:54/ 0 赞/ 150 阅读

相关 HTML——超链接

一、What？——什么是超链接先说一下我个人目前对“超链接”的理解，就两字：跳转哈哈，我个人的理解好像解释的有点简单粗暴了，比原词还

青旅半醒/ 2022年06月11日 06:59/ 0 赞/ 351 阅读

相关 GridView超链接

[GridView超链接][GridView] GridView中的超级链接，可以设置一个模版列，放入超级链接的控件，设置绑定参数即可。(自定义列) 数据绑定方式有两种

ゝ一纸荒年。/ 2021年12月17日 00:45/ 0 赞/ 382 阅读