Javascript 如何使用jquery live停止事件冒泡?
我正在尝试停止一些活动,但stopPropagation与“live”不兼容,因此我不确定该怎么办。我在他们的网站上找到了这个 现场活动不会在市场上出现泡沫 传统的方式和方法是不能改变的 停止使用StopRopagation或 停止即时传播。例如 以两次单击事件为例- 一个绑定到“li”,另一个绑定到“li a”。 如果内部面板上出现咔嗒声 锚定这两个事件将被触发。 这是因为当 美元(“li”)。绑定(“单击”,fn);注定 你实际上是在说“无论什么时候 单击事件发生在LI元素上- 或者在LI元素内部-触发此 单击“事件”。以进一步停止 处理实时事件时,fn必须 返回错误 它说fn必须返回false,所以我试图做什么Javascript 如何使用jquery live停止事件冒泡?,javascript,jquery,dom,event-delegation,Javascript,Jquery,Dom,Event Delegation,我正在尝试停止一些活动,但stopPropagation与“live”不兼容,因此我不确定该怎么办。我在他们的网站上找到了这个 现场活动不会在市场上出现泡沫 传统的方式和方法是不能改变的 停止使用StopRopagation或 停止即时传播。例如 以两次单击事件为例- 一个绑定到“li”,另一个绑定到“li a”。 如果内部面板上出现咔嗒声 锚定这两个事件将被触发。 这是因为当 美元(“li”)。绑定(“单击”,fn);注定 你实际上是在说“无论什么时候 单击事件发生在LI元素上- 或者在LI元
$('.MoreAppointments').live('click', function(e) {
alert("Hi");
return false;
});
但这不起作用,所以我不知道如何使它返回false
更新
这里有更多的信息
我有一个表单元格,并将一个单击事件绑定到它
$('#CalendarBody .DateBox').click(function(e)
{
AddApointment(this);
});
因此,AddaPoint只是创建了一些ui对话框
现在,live代码(MoreAppoints)位于这个表单元格中,基本上是一个锚定标记。因此,当我单击锚定标记时,它首先转到上面的代码(addaPoint-So首先运行该事件)运行该代码,但不启动对话框,而是直接转到(MoreAppointment)事件并运行该代码。该代码运行后,将从“AddaPoint”启动对话框
更新2
下面是一些html。我没有复制整个表,因为它有点大,所有的单元格都用相同的数据重复。如果需要,我会把它贴出来
<td id="c_12012009" class="DateBox">
<div class="DateLabel">
1</div>
<div class="appointmentContainer">
<a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a>
</div>
<div class="appointmentOverflowContainer">
<div>
<a class="MoreAppointments">+1 More</a></div>
</div>
</td>
1.
FKAFK fakfka kf414
FKAFK fakfka kf414
FKAFK fakfka kf414
FKAFK fakfka kf414
FKAFK fakfka kf414
+还有一个
也许您可以检查元素上没有发生单击事件:
$('#CalendarBody .DateBox').click(function(e) {
// if the event target is an <a> don't process:
if ($(e.target).is('a')) return;
AddApointment(this);
});
$('#CalendarBody.DateBox')。单击(函数(e){
//如果事件目标是“不执行”流程:
如果($(e.target.).is('a')返回;
附加说明(本);
});
可能有用吗?我用
e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it's cancelable)
简而言之,你不能
问题
通常,您可以阻止事件“冒泡”到外部元素上的事件处理程序,因为首先调用内部元素的处理程序。但是,jQuery的“实时事件”通过将所需事件的代理处理程序附加到文档元素,然后在事件使文档冒泡后调用相应的用户定义处理程序来工作
(来源:)
这通常使“实时”绑定成为绑定事件的一种相当有效的方法,但它有两个很大的副作用:第一,任何附加到内部元素的事件处理程序都可以防止“实时”事件为自身或其任何子元素触发;其次,一个“活动”事件处理程序不能阻止任何直接连接到文档子级的事件处理程序启动。您可以停止进一步处理,但无法对已发生的处理执行任何操作。。。在激活live事件时,直接连接到子级的处理程序已经被调用
解决方案
在这里,您最好的选择(据我所知,从您发布的内容来看)是对两个单击处理程序使用实时绑定。完成后,您应该能够从.moreAccessment处理程序返回false
,以防止调用.DateBox处理程序
例子:
我曾经使用过这样的if代码,它对我很有用:
$('#some-link').live('click', function(e) {
alert("Link clicked 1");
e.stopImmediatePropagation();
});
$('#some-link').live('click', function(e) {
alert("Link clicked 2");
});
因此,在我看来,现在JQuery支持使用live events停止即时传播我使用的是:
if(event.target != this)return; // stop event bubbling for "live" event
我在某些情况下用过这个。注意:并非始终适用,因此请一如既往地评估您的需求:
html:
这样,我的live事件仅在单击特定元素类型/类名attr时“运行”
e.preventDefault()
这里是为了停止我正在单击的链接,将滚动位置移动到页面顶部。您的标记是什么样子的?这似乎可行,只是需要对其进行更多测试。然而,我想知道是否有一种情况,点击事件是一个锚定标记,它会停止调用代码的其余部分。但是我对这个目标一无所知,所以这可能根本不是问题。出于好奇,这行:if($(this.is('a'))return代码>与你的答案有什么不同吗?@Codemonkey-是的,应该是<代码>事件。目标
始终指向单击的实际对象,其中此
将成为。日期框
-也就是绑定事件的容器。哇,这太有意义了。现在我必须选择最佳答案您的答案解释live如何处理事件冒泡并给出解决方案。或者gnarf解决方案,它不需要修改我的代码,也可以工作,但在将来的情况下可能会工作。event.stopPropagation也提到:$(“#某些链接”).live('click',function(e){if(e.target!=this)return;}
Simply use **"on"** function to bind click event of child as well as parent element.
Example : $("#content-container").on("click","a.childElement",function(e){
alert("child clicked");
e.stopPropagation() ;
});
$("#content-container").on("click","div.parentElement",function(e){
alert("parent clicked");
});
( where content-container is the outer div containing both parent as well as child elements. )
Here only "child clicked" alert will occur.
Thanks.
<a href="#" className="my-class-name">Click me</a>
if(e.target.className == 'my-class-name') {
e.preventDefault();
// do something you want to do...
}
Simply use **"on"** function to bind click event of child as well as parent element.
Example : $("#content-container").on("click","a.childElement",function(e){
alert("child clicked");
e.stopPropagation() ;
});
$("#content-container").on("click","div.parentElement",function(e){
alert("parent clicked");
});
( where content-container is the outer div containing both parent as well as child elements. )
Here only "child clicked" alert will occur.
Thanks.