出于某种原因,单击文档无法在Chrome中运行(未调用closeQuickView).
元素是通过AJAX加载的,因此需要有.on()动作(以前的.live()现在已经在jQuery 1.7中弃用了)
使用此处给出的示例:如何检测元素外部的单击？作为基础
$('html').on('click', '.poster:not(.active) .image-effect', function (event) {
var obj = $(this).parent();
// If there are no .close spans
if (obj.find('.close').length === 0) {
// Add the close element by javascript to remain semantic
obj.find('.quick-view').append('<span class="close">×</span>');
}
// Close any open Quick Views
closeQuickView();
// Add the active class (controls opacity)
obj.addClass('active');
// Fade in the Quick View
obj.find('.quick-view').fadeIn(200, 'easeInOutQuint');
event.preventDefault();
event.stopPropagation();
});
$('html').on('click', '.active', function () {
return false;
});
$('html').on('click', '.close', function …我有一个元素,其中包含许多组件.让我们调用这个元素框.现在在盒子里面我有许多不同的元素,图片,文字和按钮.
示例:http: //jsfiddle.net/roman_khrystynych/FSCRH/
HTML:
<div id="container">
<div class="box">
<div class="button">Click</div>
</div>
</div>
jQuery的:
$('#container').on("click", ".box", function(){
alert('box'); //only when anything in box except button
});
$('#container').on("click", ".button", function(){
alert('button'); //only when button clicked
});
问题是,当单击按钮时,box元素也会激活其操作.基本上我希望它是一个例外,如果我点击按钮,常规框动作不会发生,而是按钮动作发生.有什么建议？
我希望我的 CustomEvent 从文档传播到所有 DOM 元素。由于某种原因，它没有发生。我究竟做错了什么？
<html>
<script>
function onLoad() {
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("myEvent",function(){alert("Yes!");});
document.dispatchEvent(new CustomEvent("myEvent",{detail:null}));
}
</script>
<body onload="onLoad()">
<div id="myDiv"></div>
</body>
</html>
我在分配给body元素的网页上有一个按键处理程序.我真的希望它在网页的任何地方都是活跃的.或者我想.文本输入表单中的按键事件也会激活正文处理程序,这是有道理的,但我不想要.
理想情况下,我想将按键处理程序分配给body元素,并以某种方式排除输入表单.有什么方法可以在输入级别停止事件并防止它传播到正文？(或者甚至是查看HTML DOM事件的正确方法？)
javascript keypress javascript-events onkeypress event-propagation
我有一个委托父母,用于监听具有特定类的一组子项中的单击事件.
$(".toggle_group").on("click",".toggle",function(e){ .. });
所以这是一个html的例子
<div class='toggle_group'>
<a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
<a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
<a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
<a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
</div>
问题是,孩子们a.toggle将事件传播给父母,当它不应该触发处理程序时.根据jQuery文档,您无法在实时/委派事件侦听器上停止事件传播.
如何阻止a.toggle的子子项传播到父项？或者在某些情况下允许它？
你看到内部div .toggle应该是一个下拉菜单.只有当您单击切换链接时,它才会在您单击菜单时切换...
我有一个包含跨度的div.我有一个mouseup和mousedown事件,当按下div时应该触发.但它无法正常工作.
请转到这个小提琴:http://jsfiddle.net/Ym7rM/
如果您选择文本然后尝试拖动它,它只会检测到mousedown事件,但不会检测鼠标.
我究竟做错了什么？我正在使用Chrome.
谢谢
编辑:
对不起,我简化了问题,看到了新的小提琴.
由于限制,即使这是我完全避免的事情,在某种情况下我必须在achor标签的href属性中使用javascript:syntax.
(解释:在我的CMS中,我使用富文本编辑器允许用户对文本元素进行更改,包括链接.在某些情况下,需要特定的javascript:调用,并且我完全禁止从链接编辑功能上单击(以简化过程)但是,当其中一个链接出现在一个对onclick事件作出反应的块中时,该事件会发生双重攻击)
像这样:
<a href="javascript:doSomething()"></a>
我的问题是这个链接在一个已经响应onclick事件的容器内.因此我想将事件对象传递给doSomething()方法,以便我可以使用jQuery
event.stopPropagation()
方法.
然而不幸的是,似乎传递了事件对象
<a href="javascript:doSomething(event)"></a>
似乎根本不起作用.Firefox将报告ReferenceError时不会说任何内容:未定义事件
我认为是这种情况,因为href =""不是脚本启动属性(例如onclick).问题是,在这种情况下,我将无法访问超出我已经做过的标签.
因此我要么需要
1.)从href属性中将事件对象传递给doSomething()函数的方法
要么
2.)通过其他方式在该锚点(在其点击之后)停止事件传播的方法.
感谢您的任何建设性意见!
<mat-checkbox (change)="handleProductClick(children, $event)" [(ngModel)] = "children.selected"
[name]="children.grpId" [id]="children.id"></mat-checkbox>
handleProductClick(selectedProd : Product, event: any)
{
event.stopPropagation();
}
如果我使用单击功能而不是更改，则可以正常工作。虽然我无法使用click。我必须坚持改变。有没有办法从change函数调用stopPropagation？如果不是，我还能做些什么来阻止事件传播？
我有这个HTML:
<a href="#" class="action" data-action="foo">
<h1>Some</h1>
<p>Text<p>
</a>
这个绑定:
$(document).on("click", ".action", function (e) {
var do = e.target.getAttribute("data-action");
if (do === undefined || do === null) {
console.log("error");
}
});
奇怪的是,如果我点击h1或p,我的错误日志,而我期待点击冒泡到链接元素.
问题:
如果单击嵌套在具有单击处理程序的元素内的元素,那么正常行为是什么？为什么我的点击不冒泡？
谢谢!
我正在尝试使用它ng-if来打开和关闭.
我只能将值设置true为显示孩子,但我无法将值设置回false.
这是我的代码:
var app = angular.module('plunker', []);
var array = [{'name':'one'}, {'name':'two'}, {'name':'three'}];
app.controller('MainCtrl', function($scope) {
$scope.names = array;
$scope.showChild = function ( obj ) {
obj.show = true;
}
$scope.closeChild = function ( n ) {
n.show = false;
}
});
HTML:
<ul>
<li ng-repeat="n in names" ng-click="showChild(n)">
{{n.name}}
<h2 ng-if="n.show">
{{n.name | uppercase }}
</h2>
<span ng-click="closeChild(n)">
Close
</span>
</li>
</ul>
javascript events event-propagation angularjs angularjs-ng-click
javascript ×6
jquery ×6
events ×3
html ×2
anchor ×1
angularjs ×1
binding ×1
click ×1
custom-event ×1
dom ×1
html5 ×1
keypress ×1
mousedown ×1
mouseup ×1
onchange ×1
onkeypress ×1
parent-child ×1