js中的原理知识总结

罗小黑战记灬

2022-05-09 211 阅读1分钟

阻止 a 标签跳转

方法原理解析

锚点链接
- 注意使用 href="#top" 或者 href="#" 链接会返回到页面顶部。
```
<a href="#">test</a>
```
伪协议 javascript:
- 当用户点击一个以 javascript: 开头的URI时，它会执行URI中的代码，然后用返回的值替换页面内容，除非返回的值是undefined
- 注意这个方法 chorme 游览器生效，但控制台会有报错提示
```
<a href="javascript:void(0);">test</a>
<a href="javascript:;">test</a>
```

绑定事件 推荐使用

onclick return false
event.preventDefault() 阻止默认的点击事件执行

// <a id="test" href="https://baidu.com" >test</a>
a.onclick = function(e){
  // return false
  e.preventDefault()
}

css 属性 pointer-events: none;
- 元素永远不会成为鼠标事件的 target
```
<a href="https://www.baidu.com" style="pointer-events:none;">test</a>
```
- 但是，当其后代元素的pointer-events属性指定其他值时，依然会发生跳转 (鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器)
```
<a href="https://www.baidu.com" style="pointer-events:none;">
  test
  <p style="pointer-events:auto;">后代元素<p/>
</a>
```

什么是伪协议

伪协议不同于因特网上所真实存在的协议，如http:// https:// ftp://
而是为关联应用程序而使用的.如:tencent:// data: javascript:
我们可以在浏览地址栏里输入javascript:alert('JS!');，点转到后会发现，实际上是把javascript:后面的代码当JavaScript来执行，并将结果值返回给当前页面。

参考资料