阻止事件默认行为

前端面试大全·阻止事件默认行为

经典真题

什么是默认行为

阻止默认行为的方式汇总

真题解答

总结


经典真题

  • 如何阻止默认事件?

什么是默认行为

所谓默认行为,一般是指 HTML 元素所自带的行为。例如点击一个 a 元素表示的是跳转:

百度一下

在上面的代码中,设置了 a 元素的 href 属性指向百度,当用户点击该 a 元素时,就会跳转至百度。

在例如:

上面的代码中我们书写了一个 form 元素,该元素有一个 action 属性,指的是表单内容要提交的地址。而当用户点击表单元素中嵌套的提交按钮时,就会进行一个默认的提交操作。

这些,就是 HTML 元素中的默认行为。

但是有些时候,我们是不需要这些默认行为的,例如,用户在填写了一个表单后,提交信息时我们采用 ajax 来异步发送到服务器,此时就不需要表单 form 元素默认的提交跳转这个行为了。

所以此时,我们就需要阻止默认行为。

阻止默认行为的方式汇总

下面我们来对阻止默认行为的方式进行一个总结。

(1)cancelable 属性

首先要介绍的是 cancelable 属性,该属性返回一个布尔值,表示事件是否可以取消。

该属性为只读属性。返回 true 时,表示可以取消。否则,表示不可取消。

百度
var test = document.getElementById("test");
test.onclick = function (event) {
  test.innerHTML = event.cancelable; // true
}

在上面的代码中,我们为 a 元素绑定了一个点击事件,点击之后通过 event 对象的 cancelable 属性来查看该元素的默认行为是否能阻止。

最终返回的是 true,说明是能够阻止的。

(2)preventDefault 方法

preventDefault 方法是 DOM 中最常见,也是最标准的取消浏览器默认行为的方式,无返回值。

var test = document.getElementById("test");
test.onclick = function(event){
  event.preventDefault();
}

在上面的代码中,我们仍然是通过 event 对象来调用的 preventDefault 方法,从而阻止了 a 元素的默认跳转行为。

(3)returnValue 属性

这种方式使用的人比较少,知道这种方式的人也比较少。

首先 returnValue 是一个 event 对象上面的属性。该属性可读可写,默认值是 true,将其设置为 false 就可以取消事件的默认行为,与 preventDefault 方法的作用相同。

该属性最早是在 IE 的事件对象中,实现了这种取消默认行为的方式,但是现在大多数浏览器都实现了该方式。

var test = document.getElementById("test");
test.onclick = function(event){
  event.returnValue = false;
}

(4)return false

return false 是一条语句,该语句写在事件处理函数中也可以阻止默认行为。

但是需要注意的是,如果该条语句写在 jQuery 代码中,能够同时阻止默认行为和阻止冒泡,但是在原生 JavaScript 中只能阻止默认行为。

var test = document.getElementById("test");
test.onclick = function(){
  return false;
}

(5)defaultPrevented 方法

defaultPrevented 属性也是 event 对象上面的一个属性。该属性表示默认行为是否被阻止,返回 true 表示被阻止,返回 false 表示未被阻止。

var test = document.getElementById("test");
test.onclick = function (event) {
  // 采用两种不同的方式来阻止浏览器默认行为,这是为了照顾其兼容性
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
  // 将是否阻止默认行为的结果赋值给  标签的文本内容
  test.innerHTML = event.defaultPrevented;
}

在上面的代码中,我们点击 a 元素时,使用 preventDefault 方法阻止了浏览器默认行为。

之后访问 event.defaultPrevented 属性会得到 true,说明默认行为已经被阻止。

真题解答

  • 如何阻止默认事件?

参考答案:

// 方法一:全支持
event.preventDefault();
// 方法二:该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。
event.returnValue = false;
// 方法三:不建议滥用,jQuery 中可以同时阻止冒泡和默认事件
return false;

总结

本篇文章是关于JavaScript的一道面试题,后续还会持续更新HTML、CSS、JavaScript、Node.js、Vue.js、网络等前端相关面试题。如果文中出现有瑕疵的地方各位通过评论或者私信联系我,我们一起进步,有兴趣的伙伴可以关注订阅: 前端面试题大全  

你可能感兴趣的:(【前端面试大全】,javascript,前端,html,css,前端框架,vue.js)