javascript, jQuery阻止默认事件和冒泡事件

事件冒泡（event bubbling）

　　事件冒泡是指一个元素上的事件被触发，然后这个事件按嵌套顺序在父级元素上触发，直至document根节点。

　　例如：

　　　　<!DOCTYPE html>
　　　　<html>
　　　　<head>
　　　　　　<title>Event Bubbling Example</title>
　　　　</head>
　　　　<body>
　　　　　　<div id="myDiv">Click Me</div>
　　　　</body>
　　　　</html>

　　如果单击了页面中的<div>元素，那么事件会按以下顺序传播：

　　<div> --> <body> --> <html> --> document

　　也就是说，click 事件首先在<div>元素上发生，这个元素就是被点击的元素。然后，click事件沿着DOM树向上传播，在每一级节点上都会发生，直至document对象。

　　下图展示了事件冒泡的过程：

　　js阻止事件冒泡

　　　　　　var div = document.getElementById("myDiv")

　　　　　　div.onclick = function(event) {

　　　　　　　　event.stopPropagation()

　　　　　　　　// 或者直接使用return false，即阻止了事件冒泡也阻止了默认事件

　　　　　　　　// return false

　　　　　　}

　　　　</script>

　　js阻止默认事件

　　　　1.通过on这种方式的绑定的事件，使用return false：

　　　　　　var div = document.getElementById("myDiv")

　　　　　　div.onclick = function(event) {

　　　　　　　　return false //使用return false，即阻止了事件冒泡也阻止了默认事件

　　　　　　}

　　　　</script>

　　　　2.addEventListener绑定的，使用evevt.preventDefault()：

　　　　　　var div = document.getElementById("myDiv")

　　　　　　div.addEventListener( " click ", function(event) {

　　　　　　　　event.preventDefault()

　　　　　　})

　　　　</script>

　　jQuery阻止事件冒泡和默认事件

　　　　阻止事件冒泡：

　　　　$(document).ready(function() {

　　　　　　$('#myDiv').click( function(event) {

　　　　　　　　event.stopPropagation()

　　　　　　})

　　　　阻止默认事件：

　　　　$(document).ready(function() {

　　　　　　$('#myDiv').click( function(event) {

　　　　　　　　event.preventDefault()

　　　　　　})

转载于:https://www.cnblogs.com/kylincat/p/9863808.html

javascript, jQuery阻止默认事件和冒泡事件相关推荐

javascript的阻止默认事件和阻止冒泡事件
这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为在说事件冒泡之前,我 ...
jquery阻止默认行为_Jquery 事件冒泡以及阻止默认事件
1.e.preventDefault()阻止事件默认行为 e.preventDefault();----根据英文意思,如:xx $("#xx").click(function(e) ...
textarea 中如何阻止默认的回车换行事件？
回车发送消息 IM 在线聊天工具中,我们经常会使用回车(Enter)发送,或者使用组合键(Ctrl+Enter)发送消息.如果是前者使用回车(Enter)发送消息,大家都知道回车又会换行显示,这个如何 ...
JQuery阻止默认行为
有时候用户的操作未满足某些条件时,需要阻止某些元素的默认行为,如链接的跳转和表单的提交等,jQuery 提供了 preventDefault() 方法来实现.当用户未填写用户名时,阻止表单提交: De ...
WPF中的事件及冒泡事件和隧道事件（预览事件）的区别
WPF 的采取了路由事件机制,这样事件可以在可视树上层级传递.要知道 XAML 中控件都是由很多其他元素组合而成,比如我们单击了 Button 内部的 TextBlock 元素,Button 依然可以 ...
jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
JQuery阻止冒泡事件on绑定中异常情况分析
本文转载自https://www.cnblogs.com/tengj/p/4794947.html,纯粹作为日常笔记使用科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部butto ...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听参数: ...
jQuery阻止冒泡事件的几种方法
一.何为冒泡事件冒泡事件简单来说就是点击子节点,会向上触发父节点.祖先节点的点击事件. 二.阻止事件冒泡可以通过以下三种方法做到不同程度的阻止. 1.return false (In event ...

javascript, jQuery阻止默认事件和冒泡事件

javascript, jQuery阻止默认事件和冒泡事件相关推荐

最新文章

热门文章