jquery 如何子元素在上触发父元素click事件

2024-08-02

jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递

前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问题. 但是这么做的后果,在jquery1.8.2版本及以后所有版本(截止目前最新版本为3.3),会出现事件来回传递的问题,最终导致无限循环. 在jquery1.2.6版本中,子元素的点击传递给父元素时,再被父元素传递回来后,事件就不会再向外扩散了,也就是低级版本jquery只会向外扩散一次,但是在

子组件通过$emit触发父组件的事件时，参数的传递

子组件.vue <template> <div> <el-table :data="comSchemaData" highlight-current-row height="517" @row-click="quoteProps"> <el-table-column label="schema名称" prop="name"> </el-table-col

【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件. 例子: <html> <body> <table border="1" width="26%&qu

JS子元素oumouseover触发父元素onmouseout

原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父级的onmouseout后又触发onmouseover:从子级移入父级后再次触发父级的oumouseout后又触发onmouseover.而如果onmouseover内又应用了计时器便会存在较大的问题.下面针对此问题给出解决方案. 首先,在给出解决方案之前,必须先弄清楚几个对象及方法,分别如下: 1

解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部移动时会触发onMouseOut事件,信息栏放在div中,内部有table.img.a等元素,看来是由于事件冒泡,子元素上触发了事件冒泡到了父元素,导致滑动时不断闪动,头晕眼花,于是着手解决问题. 方法一: 在IE下解决问题很简单,用onMouseEnter.onMouseLeave来代替onMou

关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）

关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用line-height=高度,无法居中,发现源码.navbar-brand 设置了 padding: 15px 15px;(默认导航高度为50),于是居中应该是等于高度-30,解决过程中写了几个div用于检测问题,结果遇到了以下问题,经过数小时的研究(时间大多花费在百度与谷歌上,以及研究原因上),于是写

解决：子元素设置margin-top，父元素也受影响的问题

<!doctype html><html> <head> <meta charset="UTF-8"> <title>子元素设置margin-top,父元素也受影响</title></head><style type="text/css"> * { margin: 0px; padding: 0px; } .father { width: 500px; height: 8

解决jQuery中dbclick事件触发两次click事件

首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbclick可以触发两次click事件.例如一个DOM元素div,既绑定了 click 事件,又绑定了 dblclick 事件,这两个事件分别要做独立的事情.事件处理上没有冲突,都可以各自完成各自的操作.双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了click 事件,那么,如何来

HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. why 子元素浮动会导致父元素高度塌陷? 这是因为内部的元素设置float:left || right后,就丢失了

jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索

1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid #999"); //给p元素的父元素添加边框样式 $("p").parents("div").css(...); //给p元素的父元素中的div元素添加样式 (2)closest(selector[,context]) 方法 $("p").

html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> <div class="title login" style="color: #fff;font-size: 14px" id="personalInfo"> 你好, <span style="color:#fff;font-

CSSmargin击穿问题（子元素margin-top会影响父元素）

最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container"> <div class="children">子元素</div> </div> .container { background-color: rgb(226, 43, 89); } .children { background-colo

子元素应该margin-top影响父元素的解决办法

在子元素设置margin-top,有时会带着父元素一起移动. 原因: Outer Div [margin: 0 auto] Inner Div [margin-top: 10px] 根据CSS2.1盒模型规范,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没有Inner Div的“margin-top”属性,一切如预期.但是当Inner Div设置了“margin-top:10px”之后,它的父元素Outer Div也

【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？

正常情况如果子元素没有设置浮动(float),父元素的高度会随着子元素高度的改变而改变的. 设置浮动以后父元素的高度不会随着子元素的高度而变化. 例如:在一个ul中定义若干个li,并设置float='left' <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

子元素的margin-top影响父元素原因和解决办法

这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another

子元素设置margin-top，父元素也受影响

这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,竟然是CSS2.1盒模型规范--尽管非常别扭,非常别扭的规定. 问题例如以下.两层Div结构.Outer Div属性为"margin:0 auto".本该紧贴外框顶部的,假设没有Inner Div,或者没有Inner Div的"margin-top"属性,一切如预期.可

偏前端 - jquery-iframe内触发父窗口自定义事件-

例如父窗口定义了一个事件. top: $(dom1).bind('topEvent', function(){}); 那么iframe里面的元素怎样触发父窗口dom1的事件呢?这样吗? $(dom1, parent.document).trigger('topEvent'); 看似正确,实则误导人. *因为父窗口的jquery对象与iframe里面的jquery对象实际为两个对象(function),iframe里面的jquery并不会触发另一个jquery对象定义的事件.除非你在iframe这

［面试没回答上的问题2］IOS上给body绑定click事件的bug

面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari内核,所以ios浏览器全部中枪. bug描述在进行事件委托时,如果将未存在于DOM的元素事件直接委托到body上的话,会导致事件委托失效,调试结果为事件响应到body子元素为止,既没有冒泡到body上,也没有被body所捕获.但如果事件是DOM元素本身具有的,则不会触发bug.换而言之,只有元素的

IOS设备上给body绑定click事件不生效及其解决办法

事件背景: 最近在做一个移动端业务的时候碰到一个bug,在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效. 思考: 暂借助jquery展示下事件绑定代码,将所有标签含有data-tip属性的元素通过事件代理至body $('body').on('click','[data-tip]',function(e){ console.log($(this.).attr('data-tip')) }) 这样做在android和pc上都可以正常实现,但是在ios上面对部分标签尽然不

Silverlight 后台利用代码触发 Button 的Click事件

页面上一个查询按钮,当用户点击回车键的时候处罚查询按钮的onclick事件 public MainPage() { InitializeComponent(); this.KeyDown += new KeyEventHandler(MainPage_KeyDown); } void MainPage_KeyDown(object sender, KeyEventArgs e) { //throw new NotImplementedException(); if (e.Key == Ke

如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）

<div onclick="alert();"> <div onclick="alert();"></div> </div> 上面给一个很简单的例子,当点击第二个div的时候,会同时触发此div与其父元素的点击事件,按照官方的说法,这是事件的浮升,那么要怎么阻止这种情况呢? 可以使用 event.cancelBubble=true; 代码如下: <div onclick="alert();"&

jquery 如何子元素在上触发父元素click事件

热门专题