preventDefault 和 stopPropagation 的区别

  1. 云栖社区>
  2. 博客>
  3. 正文

preventDefault 和 stopPropagation 的区别

asing1elife 2018-09-11 08:49:51 浏览772
展开阅读全文
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82620083

preventDefault 和 stopPropagation 的区别

在使用 JS 阻止默认动作时,通常会使用 preventDefault 或 stopPropagation ,但两者存在一定区别

更多精彩

preventDefault

  1. 如下方法中,.training-name-input 存在与一个表单中,该元素监听了键盘的回车事件
  2. 如果不使用 e.preventDefault() 则会在触发该监听的同时,触发表单中 type="submit" 按钮的提交事件
  3. 所以 preventDefault 的关键作用在于通知浏览器不执行与事件关联的默认动作
$diplomaContentPanel.find('.training-name-input').on('keydown', function (e) {
  e.preventDefault()

  if (e.keyCode === 13) {
        // 只响应回车事件
  }
})

stopPropagation

  1. 如下方法中,carousel-indicators li 是一个插件的节点,本身就被插件赋予了点击事件
  2. 但是使用时希望屏蔽该插件赋予的点击事件,这个时候就需要使用 e.stopPropagation()
  3. 作用在于,阻止 DOM 元素继续向下冒泡,在执行了该点击方法后,就停止了,不再响应被赋予的其他点击事件
$noviceGuidePanel.find('.carousel-indicators li').on('click', function (e) {
    e.stopPropagation()
})

网友评论

登录后评论
0/500
评论
asing1elife
+ 关注