JavaScript 几个比较零碎的点 --- 阻止后续默认行为

标题是阻止后续默认行为

首先要知道什么是后续默认行为.

默认后续行为大概包括下面几种

超级链接,也就是A表情点击之后的跳转.
submit 按钮点击之后的表单提交.

好了,我就只知道这两个比较常用的.其他的不清楚.

接着,我们需要知道为什么要阻止后续默认行为?

最常见的场景是:

超级链接A标签,我们有时候会把它当成按钮来使用.点击它之后,希望不要跳转(包括段落跳转)

阻止默认后续行为的几种方式

既然我们是需要阻止后续默认行为.

那么我们肯定一般是也要绑定事件的.

比如 A 标签当按钮来使.

句柄方式事件响应函数绑定以及阻止后续默认事件

a.onclick = function () {
    // 按钮使的代码
    return false
}

这种写法,其实好处挺多的

这种事件绑定的方式兼容性最好.
阻止默认后续行为的方式也很简单 return false 即可.

W3C标准下的事件响应函数以及阻止后续默认行为

W3C 给事件对象提供了一个叫 preventDefault() 的方法来阻止一些后续默认行为.

a.addEventListener('click',function (e) {
    //按钮代码
    e.preventDafault()
}, false)

蛋疼的是 IE9 以及以下的版本不支持.

IE 浏览器下的(主要是IE9以及以下的版本)事件响应函数绑定以及阻止后续默认行为.

IE9以及以下浏览器,在事件对象(window.event)上提供了一个属性叫 returnValue.
把这个属性设置成 false 即可阻止后续默认行为.

a.attachEvent('onclick',function(){
    // 按钮代码
    
    var event = window.event
    event.returnValue = false
})

兼容性封装

注意,这里的封装主要是为了解决不是使用句柄式来绑定事件响应函数的阻止后续默认行为的方式.

句柄式的直接return false 即可.

// 阻止默认后续行为方法封装
function cancelDefault (e) {
    let e = e || window.event
    if (e.preventDefault) {
        e.preventDefault() // W3C标准,主流浏览器.
    } else {
        e.returnValue = true //IE9以及以下版本的老IE浏览器.
    }
}

// 添加事件兼容模式
  function addEvent(el, type, fn) {
    if (el.addEventListener) {
      el.addEventListener(type, fn)
    } else if (el.attchEvent) {
      el.attchEvent('on' + type, function () {
        fn.call(el) // 解决 <=IE9 版本以下的浏览器 attachEvent 的事件响应函数中this指向的不是el元素的问题.
      })
    } else {
      el['on' + type] = fn
    }

  }

addEvent(a,'click', function (e) {
    //按钮代码
    cancelDefault(e) // 组织后续默认行为.
})

最后编辑于：2019.03.26 00:28:27