因为点击超链接是个特别麻烦的事情,需要鼠标移动到指定的标题才可以(这真的是太累了)。所以博客的文章卡片、分类页面都是不需要鼠标移动到标题就可以点击进入跳转页面的。我是通过给父级元素添加onclick的方式来添加跳转。但是这就出现了一个问题,点击标签的时候会从子元素的事件触发一遍,然后再触发父元素事件。也就是说点击标签的时候会跳转两个页面。

如何解决这个问题呢?

添加事件

给子元素添加下面的onclick事件:

1
window.event.cancelBubble=true;

可以阻止子元素的点击事件触发父元素的事件。我们使用html的时候可以添加:

1
onclick="window.event.cancelBubble=true;"

完整例子(子元素):

1
<a class="article-meta__tags" href="/tags/%E5%BF%85%E7%9C%8B/" event.cancelbubble="" onclick="window.event.cancelBubble=true;" data-pjax-state="">#必看</a>

pug代码

1
onclick=`window.event.cancelBubble=true;`