<
a onclick=
"toggleFriendFuncList(event, '6708062', 'he');"
></
a>
由于href是空值,如果不阻止浏览器的默认行为,产生的效果就是刷新页面。
现在我们需要做的就是阻止href的链接事件,而去执行onclick事件。
老的处理方式
<
a onclick=
"toggleFriendFuncList(event, '6708062', 'he');"
href=
"javascript:void(0);"
></
a>
|
js的写法:
1)停止冒泡的写法
//如果提供了事件对象,则这是一个非IE浏览器
if
(
e &
amp;&
amp;
e.stopPropagation
)
// 因此它支持W3C的stopPropagation()方法
e.stopPropagation
(
)
;
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event
.cancelBubble
=
true
;
return
false
;
|
2)阻止浏览器的默认行为
//如果提供了事件对象,则这是一个非IE浏览器
if
(
e &
amp;&
amp;
e.preventDefault
)
//阻止默认浏览器动作(W3C)
e.preventDefault
(
)
;
else
//IE中阻止函数器默认动作的方式
window.event
.returnValue
=
false
;
return
false
;
|
jquery的写法:
1)return false
:In event handler ,prevents default behavior and event bubbing 。
return false 在事件的处理中,可以阻止默认事件和冒泡事件。
2)event.preventDefault()
:In event handler ,prevent default event (allows bubbling) 。
event.preventDefault()在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。
3)event.stopPropagation()
:In event handler ,prevent bubbling (allows default behavior).
event.stopPropagation()在事件的处理中,可以阻止冒泡但是允许默认事件的发生
prototype的写法:
Event.stop(event)
用法介绍:
事件发生后,浏览器通常首先触发事件发生元素上的事件处理程序,然后是它的父元素,父元素的父元素……依此类推, 直到文档的根元素为止。这被称为 事件冒泡,是事件传播的最常见的方式。当处理好一个事件后, 你可能想要停止事件的传播,不希望它继续冒泡。
当你的程序有机会处理事件时,如果这个事件具有 默认行为,同时浏览器也会处理它。例如,点击导航链接、 将表单提交到服务器、在一个单行文本框中按下回车键等等。如果对这些事件你定义了自己的处理方式, 可能会非常希望阻止相关的默认行为。
分享到:
相关推荐
在JavaScript中,我们经常需要阻止默认的浏览器行为和事件冒泡,以便实现自定义的功能。在前端开发中,由于浏览器的兼容性问题,理解和掌握这些技术至关重要。下面将详细介绍如何实现这两种功能。 1. **阻止浏览器...
4. **事件处理**:Prototype提供了`Event.observe()`和`Event.stopObserving()`方法来绑定和解绑事件处理程序,以及`Event.stop()`来阻止事件的默认行为。此外,它还引入了模拟DOM事件冒泡的概念,使得跨浏览器的...
在事件处理方面,Prototype.js 提供了统一的事件绑定和解绑接口,如`Event.observe()`和`Event.stopObserving()`,并且支持事件冒泡和阻止默认行为。这使得跨浏览器的事件处理变得更加一致,降低了兼容性问题的处理...
- 阻止默认行为:event.preventDefault()可以阻止浏览器的默认行为。 - 事件委托:利用事件冒泡,只在父元素上设置事件监听器,处理子元素的事件。 10. **JavaScript框架与库**: - jQuery:简化DOM操作、事件...
3. 事件冒泡和捕获:事件从最深的节点开始向上冒泡,直至到达文档根节点,也可选择从根节点向下捕获事件。 4. 阻止默认行为:event.preventDefault()方法可以阻止事件的默认行为,如链接跳转、表单提交等。 DOM操作...
- 事件冒泡和事件捕获:事件传播的两种模式。 - 阻止默认行为:`event.preventDefault()`阻止事件默认行为。 6. **DOM操作**: - DOM(Document Object Model)是HTML和XML文档的结构表示,JavaScript可以通过...
2. 事件冒泡与阻止:`.stopPropagation()`用于阻止事件冒泡,`.preventDefault()`阻止默认行为,如链接的跳转。 三、动画效果 jQuery 1.2.6提供了丰富的动画效果,如`.fadeIn()`, `.fadeOut()`, `.slideToggle()`,...
- 事件冒泡和捕获:IE默认采用事件冒泡,FF默认采用事件捕获。可以使用`event.stopPropagation()`和`event.preventDefault()`控制。 5. 数组方法: - `Array.push()`和`Array.pop()`:这两个方法在IE和FF中处理...
例如,`addEventListener()`用于添加事件监听器,`event.preventDefault()`阻止默认行为,`event.stopPropagation()`阻止事件冒泡。 3. **Ajax异步通信**:通过XMLHttpRequest对象或者更现代的fetch API,JS能够...
- 阻止默认行为和取消事件传播。 5. jQuery与Vue/Angular/React等框架: - jQuery的基本API,如选择器、DOM操作、事件处理。 - Vue的响应式原理、组件化开发、生命周期钩子。 - Angular的依赖注入、指令系统和...
- 对于事件冒泡和事件捕获,IE默认支持冒泡,而Firefox则默认支持捕获。使用`event.stopPropagation()`和`event.stopImmediatePropagation()`来控制事件传播,确保在不同浏览器中行为一致。 3. **CSS样式操作**: ...
JavaScript知识图谱涵盖了这门语言的各个方面,包括基础语法、数据类型、控制结构、函数、对象、数组、类与模块、DOM操作、BOM处理、事件处理、异步编程、Ajax、jQuery库、CSS操作、浏览器兼容性问题以及框架(如...
5. **事件处理**:DOM事件、事件对象、事件冒泡和事件捕获、事件监听器、自定义事件。 6. **DOM操作**:文档对象模型(Document)、元素选择(getElementById、getElementsByClassName、getElementsByTagName等)、...
同时,事件冒泡和捕获机制在IE中与其他浏览器有所不同,需注意处理。 5. **盒模型**:IE6默认使用怪异盒模型,可能导致元素尺寸计算错误。可以通过设置`*{box-sizing:border-box}`来统一盒模型。 6. **PNG透明度**...
- 事件冒泡与事件捕获:事件在DOM树中从底层向上或从上层向下传播。 - 事件对象:`event`参数提供关于事件的信息。 6. **DOM操作** - 选择元素:`getElementById`,`getElementsByClassName`,`querySelector`,...
- **事件阻止**:学习如何阻止默认行为和冒泡行为。 #### 6. 表单验证与提交 - **实时验证**:通过Ajax实现实时反馈用户输入的有效性。 - **表单提交**:如何使用Ajax异步提交表单数据并处理服务器响应。 #### 7....
7. 使用框架或库:虽然可以直接使用原生JavaScript实现上述功能,但也可以选择使用一些现成的框架或库,比如Prototype.js、jQuery UI等,它们提供了更方便的拖拽接口。 接下来,我们分析一下提供的部分内容: 在...
8. **事件与事件处理**:事件监听、事件冒泡、事件捕获,以及事件对象的使用。 9. **正则表达式**:用于字符串匹配和处理,掌握基本的正则语法和高级用法。 10. **错误处理**:try...catch语句,理解JavaScript的...
- **阻止默认行为**:通过`event.preventDefault()`方法阻止事件的默认行为。 ### 6. 数组去重 #### 方法 - **Set方法**:利用ES6的`Set`集合自动去除重复项。 - **遍历方法**:使用`filter`方法结合`indexOf`进行...