a标签中嵌套按钮实现点击按钮不跳转a标签中的链接

Zhang190716

于 2019-11-26 09:35:52 发布

阅读量1.5k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/Zhang190716/article/details/103250176

版权

网页的顶栏广告中有嵌套在a标签中的按钮；例如京东
在这里插入图片描述
结构应该类似于

点击关闭按钮关闭广告栏，而不跳转标签的链接

不是使用cancelBubble 或者stopPropagation()阻止事件冒泡;

使用的仅仅是阻止默认行为preventDefault()方法

原因是点击a跳转链接是a的默认行为而不是事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            display: block;
            width:200px;
            height:200px;
            background-color: red;
        }
        .d1{
            width:150px;
            height: 100px;
            background-color: black;;
        }
    </sty

最低0.47元/天解锁文章

Zhang190716

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a标签中嵌套按钮实现点击按钮不跳转a标签中的链接

网页的顶栏广告中有嵌套在a标签中的按钮；例如京东结构应该类似于点击关闭按钮关闭广告栏，而不跳转标签的链接不是使用cancelBubble 或者stopPropagation()阻止事件冒泡;使用的仅仅是使用阻止默认行为preventDefault()原因是点击a跳转链接是a的默认行为而不是事件。<!DOCTYPE html><html lang="en"&gt...
复制链接

扫一扫