JavaScript onclick会触发冒泡

2024-10-28

关于JS 事件冒泡和onclick,click,on()事件触发顺序

今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox. 查看JQgrid源码,发现它的click事件是绑定到了table上,然后判断事件点击目标,找到选中行给它勾选:而我的click事件是绑定到td里面的div中. 按照事件冒泡的触发顺序,应该是我的事件先触发,之后是JQgrid的事件. 结果不是这样的.我发现JQgrid使用$().click(fu

javascript必须懂之冒泡事件

在学习javascript中,如果在事件的使用上出现一些反差效果,不良效果,如鼠标的移入移出时,显示你所需要的内容, 但就是没有出现,然而你不断的检查代码,逐个代码查错,还在浏览器的调试工具中调试都没有发现错误,没有看到你所想要的错误,那么这个时候你要判断一下是不是冒泡事件带来的不良效果了,不过在判断之前,你是不是要知道什么是冒泡事件呢? 接下来冒泡的解释: 冒泡就是从里的事件源一级一级向上触发直到window: 图: 事件源就是你所触发事件在位置的元素,而在这个元素触发了事件,如图你所触发的

【转】JavaScript 事件顺序：冒泡和捕获

补充说明:这篇文章通俗易懂地讲解了冒泡和捕获原理,原文来自 ppk 大侠的 quirksmode 站点.感谢网友 hh54188 的翻译. 事件的发生顺序这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素 ----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | | | ------------

javascript 的事件--阻止冒泡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body> <input type="button" id="btn1" value="点击"> <

JavaScript onclick传递对象参数（easyui传递一行数据时）错误：uncaught SyntaxError: Unexpected identifier

JavaScript onclick传递对象参数(easyui传递一行数据时)错误:uncaught SyntaxError: Unexpected identifier 博主遇到的是用onclick传递对象参数时(easyui传递一行数据时),会报Sncaught SyntaxError: Unexpected identifier错误. 经查,onclick(对象)这种传递对象形式里面的对象会变成onclick([object Object]). 解决方法:将对象转化为json字符串,再将j

javascript中的事件冒泡、事件捕获和事件执行顺序

谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选择实现了捕获事件流,微软则实现了冒泡事件流.幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式. 1事件传播--冒泡与捕

javascript如何阻止事件冒泡和默认行为

阻止冒泡: 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo 就是很好的例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css&q

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流页面的哪一部分会拥有某个特定事件,例子:在纸上画一组同心圆,如果手指放在同心圆上,那么手指向的不是一个圆,而是纸上所有的圆.在页面中也是,如果点击了某个按钮,同时也单击了按钮的容器元素,甚至也单击了整个页面事件流:页面接收事件的顺序,IE和Netscape最开始提出了两种概念,两种事件冒泡流,事件捕获流 <!

JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)

1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函数都是对象,都会占用内存,内存中对象越多,性能越差. 2.必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间. 怎样处理由于事件较多引起的性能差: 1.采用事件委托技术,限制简历的连接数量 2.在不需要的时候移除事件处理程序例子: html: <div id=

javascript里阻止事件冒泡

如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性,如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true. 火狐等非IE浏览器阻止冒泡事件使用stopPropagation()方法.调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点. 我们看代码实例: <!doctype html> <html lan

javascript事件捕获与冒泡

对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就像气泡从水底向水面上浮一样.而在像firefox,chrome,safari这类所谓的标准浏览器中,事件传播还有个阶段,那就是捕获阶段,这个很少有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目. 事实上,捕获阶段是一个和冒泡阶段完全相反的过程,即事件由祖先元素向子元素传播,和一个石子儿从水

2014年辛星解读Javascript之DOM之冒泡和捕获

上篇博客提到了Javascript事件绑定函数的三个參数.第一个是一个event.第二个是一个function.第三个是一个布尔变量.它用于指定事件传递的顺序,分为冒泡和捕获两种方式,接下来我们将揭开它的神奇面纱,彻底的解读它. 首先看例如以下代码: <html> <body> <div id = "demo"><p id = "tag">辛星</p></demo> <script typ

解决IOS移动端 Safari流浪器 onclick无法触发的问题

在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变大, 本来这个设计是很好的, 但是这也跟前端工程师带来麻烦, 当头部和尾部隐藏掉之后, 再点击底部的按钮, 不会触发, 它会自动识别点击了底部, 先把底部和头部显示出来, 再次点击这个按钮时才会触发, 这就导致了底部按钮需要点击两次才能触发, QA肯定是不愿意的, 用户更是不愿意的, 废话不多说,

JavaScript 事件(捕获和冒泡兼容性写法)

事件浏览器客户端上客户触发的行为都称为事件所有的事件都是天生自带的不需要人为绑定只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法事件名:onmouseover onmouseout onmousedown onmousemove onmouseup Onclick onchange onfocus onblur 等等当用户触发一个事件时,浏览器的所有详细信息都存在一个叫event的对象上. 我们把他叫事件对象事件对象 event

javascript onclick事件可以调用两个方法吗？

答案是:可以的,onclick事件可以调用多个方法,每个方法之间用分号(:)隔开即可. onclick后面其实是可以写任何代码的,但是一般不建议这么写!! 例:onclick="fun1(); fun2(); fun3()" 小案例最近在一本书里看到一个JavaScript图片库的例子,作者希望能留在这个网页而不是转到另一个窗口,结构如下: 将图片路径直接给到一个链接中,会遇到一个问题: 触发点击事件,不仅会触发showPic函数,链接被点击的默认行为也会被调用,这样图片还是会在另一

javascript中的事件冒泡和事件捕获

1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML 页面为例: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv&q

javascript按回车键触发事件

[HTMLDOM]onmousedown、onmouseup 以及onclick事件触发顺序

摘自w3school:http://www.w3school.com.cn/htmldom/dom_events.asp onmousedown.onmouseup 以及 onclick 事件是鼠标点击的全部过程. 首先当某个鼠标按钮被点击时,触发 onmousedown 事件,然后,当鼠标按钮被松开时,会触发 onmouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件.

JavaScript中的事件冒泡机制

事件冒泡机制事件冒泡发生的条件:当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制.在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最外面的元素.如果把事件处理程序指定给所有的元素,那么这些事件将依次触发. 举个例子: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <t

javaScript 的option触发事件

先说jquery的option触发事件,很方便 $("option:selected")//这样就能直接触发选择的option了在JavaScript中就显得比较麻烦,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. <select id="pid" onchange="gradeChange(this.value)"> <option grade="1&q

javascript数组顺序-----1冒泡的另一种比较好理解的写法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript数组冒泡排序法</title> </head> <body> <script> var array = [7, 9, 22, 11, 12, 13, 5, 4, 3, 2, 1]; function c

JavaScript onclick会触发冒泡

热门专题