[ Day 18 ] - 取消 HTML 预设的触发行为

HTML 部份元素会有预设的触发行为,像是 的连结、表单的 submit
若是需要在这些元素绑定事件,让指定的元素可以执行指定的程序码
那就得取消 HTML 预设的触发行为

  • 情境:点选连结後,在 console 要显示 nya 的字样
<a href="https://www.google.com">Google 连结</a>
const isLink = document.querySelector('a');  // 选到 a 标签

isLink.addEventListener('click',function(e){
  console.log('Nya');
});

在连结上绑定的 click 事件,但点选时还是会连结到指定的地方
此时就需要使用取消 HTML 触发行为

使用 event.preventDefault() 来取消预设的触发行为

<a href="https://www.google.com">Google 连结</a>
const isLink = document.querySelector('a');  // 选到 a 标签

isLink.addEventListener('click',function(e){
  e.preventDefault();
  console.log('Nya');
});

结果

使用 event.preventDefault() 就会把预设行为取消

参考资料及学习资源

  • 0 陷阱!0 误解!8 天重新认识 JavaScript!
  • JavaScript 指南
  • 六角学院 - JavaScript 必修篇 - 前端修练全攻略

本日小节

今天简单介绍怎麽取消 HTML 预设行为
有任何问题都欢迎传讯息给我
这是我的学习纪录,我们下次见~


<<:  TailwindCSS 从零开始 - Just In Time 模式的有趣功能

>>:  DAY21 - 金鱼脑学了新的忘了旧的

Day 29 (Jq)

1.empty、remove、detach比较 (1)empty vs remove empty()...

CSS微动画 - 倒数计时,绘制圆饼图!

Q: 这个用Svg做吧? A: 如果你的需求跟我这款一样,Css就可以画罗~ 上一篇的时钟给小编这...

Day21:安全性和演算法-共用金钥密码系统(shared-key crypto system)

前言 前一天我们有稍微提到安全性演算法的其中一个,也就是今天的主题「共同金钥密码系统」(shared...

goroutine

Golang goroutine 我自己理解goroutine 就很类似其他语言的thread[备注...

Day 02 - 那个 React Hook

如果有错误,欢迎留言指教~ Q_Q 什麽是 Hook? Hook 是 React 16.8 中增加...