Tag: event bubbling

如何在具有相同类的所有div上设置click事件

我在所有具有类“卡”的DIV上启动相同事件时遇到问题,如下面的屏幕截图所示: CardClick 1 CardClick 2 CardClick 4 CardClick 5 CardClick 4 CardClick 5 CardClick 6 CardClick 4 我将处理程序设置为: $(“.card”).click(function() { alert(“clicked…”); }); 问题是警报框仅出现在下面屏幕截图中标记为黑色的DIV上。 对于所有其他框,行alert(“clicked…”)不会执行事件。 即使是在顶行标记为5的框,也只有在其右上角单击时才会显示警告框。 单击此框中的任何其他位置不会启动警报。 (底行的方框没有这个问题,如果在任何地方点击它们,它们的警报就会显示正常)。 这是否与事件冒泡或事件捕获有关? 如何修复它,以便为所有带有“卡”类的DIV调用警报? 更新:相关CSS如下所示: .card { width: 100px; height: 100px; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: […]

如何使用更新后的代码修改幻灯片切换来停止事件传播。

我有一个jqueryfunction,我有两个选项卡。 click ,每个选项卡都会进行ajax调用并绘制一个jsp页面。 第二个选项卡有一个幻灯片切换。 我的问题是,当页面加载时,我点击第二个选项卡,幻灯片切换工作正常。 当我单击第一个选项卡并单击第二个选项卡时,幻灯片切换将快速打开和关闭。 如何阻止这种传播? 我尝试了事件.preventDefault() , stopPropagation() , die等等。没有运气。 我试过的代码如下。 幻灯片切换方法是一个js文件,另外两个在不同的js文件中。 jQuery(function() { //$(“.trigger1”).on(‘click’, function (e) { $(“#qstnlist_content”).off(‘click’, ‘.trigger1’).on(‘click’, ‘.trigger1’, function(event) { // $(“.trigger1”).die(‘click’).live(‘click’,function(event){ //if($(event.target).is(‘div.trigger1’)){ //$(“document”).off(‘click’, “#list_intrv_qstns”).on(‘click’, “#list_intrv_qstns”, function (e) { var str = $(this).find(“span.imgplus”).text(); if (str.indexOf(“+”) >= 0) $(this).find(“span.imgplus”).html(“- “); if (str.indexOf(“-“) >= 0) $(this).find(“span.imgplus”).html(“+ “); $(this).next(“div.dispnone”).slideToggle(“slow”); /* if(event.preventDefault){ event.preventDefault()} else{event.stop()}; event.returnValue = […]

使用冒泡(JavaScript / jQuery)将事件处理程序绑定到特定元素

我正在开发一个近似于Firebug检查工具function的项目。 也就是说,当鼠标hover在页面上的元素上时,我想突出显示它们(通过更改它们的背景颜色),当它们被单击时,我想执行一个构建可以使用的CSS选择器的函数识别它们。 但是,我一直遇到与事件冒泡有关的问题,并且彻底弄糊涂了我自己。 而不是让你沿着这条路走下去,只是为了解释我正在尝试做什么并寻求一些帮助,这可能是有意义的。 以下是一些规格: 我只对包含文本节点的元素(或带有文本节点的任何后代元素)感兴趣。 当鼠标进入这样的元素时,请更改其背景颜色。 当鼠标离开该元素时,将其背景颜色更改回原来的颜色。 单击元素时,执行为该元素构建CSS选择器的函数。 我不希望鼠标hover在元素的边缘区域上作为该元素的鼠标hover,但是对于下面的元素(我认为这是默认的浏览器行为?)。 我可以处理突出显示/取消突出显示的代码,并构建CSS选择器。 我主要遇到的问题是有效地将事件处理程序绑定到我想要突出显示/可点击的元素,并避免/停止冒泡,以便鼠标hover在( )元素上也不会执行处理函数例如,。 我认为正确的方法是将事件处理程序绑定到document元素,然后以某种方式使用bubbling只执行最顶层元素的绑定函数,但我不知道代码是什么样的,那真的是我可以在哪里使用帮助。 我正在使用jQuery,并希望尽可能地依赖它。 提前感谢任何指导!

复选框内的锚点击行为

请考虑以下代码段: Goooooogle $(function() { var checkbox = $(”); checkbox.prependTo($(‘#a’)); checkbox.click(function(e) { e.stopPropagation(); // do something useful }); }); 我想在找到一个复选框,并获得以下点击行为: 像往常一样正常切换复选标记 做一些有用的事情,比如AJAX请求 留在这个页面上,即不被重定向到a href 此外,如果我单击a中的任何位置而不是单击复选框,我希望不覆盖默认行为。 即我想允许执行与点击本身相关联的所有事件处理程序。 我认为这应该很容易,但我不能得到理想的行为。 或者: 如果我提供了代码,我会被重定向到Google。 如果我使用return false; e.preventDefault() ,我不会切换复选标记return false; 。 此外,在这种情况下,复选框忽略显式checkbox.attr(‘checked’, ‘checked’)以及设置复选标记的所有其他可能方法。 渔获量在哪里? UPD:这在Chrome中可以正常运行,例如我没有在点击时重定向,但在Firefox中失败了。 有跨浏览器的方式吗?

事件处理订单

javascript jquery事件处理如果在事件上(例如’click’)为父元素绑定了一个函数,为子DOM元素绑定了另一个处理函数,它们中的哪一个被调用? 如果所有人都会按照哪个顺序打电话? 谢谢!

试图阻止jQueryMobile滑动手势冒泡,但它无法正常工作

我正在使用jQuery Mobile并创建了一些类似于Android Holo Tabs的东西: http://note.io/18RNMRk 为了使滑动手势能够在标签之间切换,这是我添加的代码: $(“#myPage #pageTabs”).on(‘swipeleft swiperight’, function(e){ e.stopPropagation(); e.preventDefault(); }); $(“#myPage”).on(‘swipeleft’, function(){ ui.activities.swipe(1); }).on(‘swiperight’, function(){ ui.activities.swipe(-1); }); 标签的HTML类似于: Thu Fri Sat AM Sat PM Sun 我正在侦听页面级别的滑动手势,因为如果没有足够的内容, div[data-role=content]有时可能无法垂直填充屏幕。 如果我听了这个div并且它没有覆盖屏幕,并且你靠近底部滑动,事件将不会触发此div,它将在根页面上( div[data-role=page] )。 这是Firefox对该页面的3D渲染,用于certificate上述断言。 我注释了div[data-role=content] : http://note.io/18RPhyK 出于这个原因,我正在页面层面上听它; 但由于标签的数量可以滚出视口(如上所示:星期日在屏幕右侧),我希望用户能够水平滚动它。 我已经有了水平滚动工作(这只是一些简单的CSS),但问题是,即使我上面看到的e.stopPropagation() ,滑动手势冒泡到页面元素,我的滑动手势阻止在我添加滑动手势之前可用的平滑滚动。 我是否误解了事件冒泡是如何工作的,或者在这种情况下如何阻止事件冒泡?

jQuery – 单击LI,显示/隐藏UL – 单击LI:a href,继续显示UL并在空白窗口中打开

感谢SO的精彩贡献者! 当你开始理解它时,jQuery会更酷。 🙂 所以我有一个LI,当点击显示/隐藏一个孩子UL。 我想要做的是能够点击LI内部的链接打开一个空白窗口,但也不能关闭子UL。 空白窗口打开 a[href^=”http://”]’).attr(“target”, “_blank”); 但是,我不确定如何在LI上“返回:false”,因此当空白窗口打开时它不会关闭UL。 我希望用户能够在关闭空白窗口时看到他们所在的孩子UL。 如果不清楚,请告诉我。 谢谢!

事件捕获,事件冒泡和jQuery.on()

我有一个关于事件捕获 , 冒泡和jQuery.on()的有趣问题。 我最近了解了更多关于事件捕获和事件冒泡之间的区别以及两者如何在DOM内的子父元素之间进行不同的流动。 因此,要添加具有“事件捕获方向”的事件侦听器,我将使用: element.addEventListener(“click”, myFunction, true); 并添加一个事件监听器与“事件泡沫方向”我将使用: element.addEventListener(“click”, myFunction, false); 这一切都很好,但我想知道的是当使用jquery.on()添加事件监听器时,如何在捕获和冒泡方面指定事件方向? 目前我使用的是: $(‘parent selector’).on(‘click’, ‘child selector’, function(){alert(‘just alert something already…’);}); 如何告诉jQuery需要在“事件捕获方向”或“事件冒泡方向”中添加这些事件监听器?

jQuery事件冒泡

我想了解如何解释冒泡。 这是否意味着上升HTML代码层次结构或其他东西? 其次,我正在经历一个例子 ,我无法理解它所说的最后一部分 基于P的点击处理程序侦听click事件,然后阻止它传播(冒泡) 这是什么意思?

jQuery stopPropagation bubble down

我有一个带有链接的div: Lol 单击 应该在某个位置,但单击子项应该转到www.lol.com。 我从之前的问题和jQuery网站上看到.stopPropagation可以防止冒泡,但我如何防止泡沫向下(这不是必要的吗?)。