У меня есть html, как показано ниже:
<div class="parent">
<a href="#">parent</a>
<div class="child">child</div>
</div>
Вот мой Jquery, связывающий событие click
:
$(document).ready(function(){
$('.parent').on('click', function(){
alert('parent div');
});
$('.child').on('click', function(){
alert('child div');
});
});
Я хочу, если я нажму на ".child"
div, то событие, связанное с "div.parent"
, не должно вызываться. Опять же, если я нажму на ".parent"
div и его связанное событие должно быть выполнено.
Я попытался со следующим -
$('.child').on('click', function(){
alert('child div');
$(this).parents('.parent').off('click');
return false;
});
Но приведенный выше код навсегда отменил событие "click"
на parent div
, и снова его событие щелчка не срабатывает.
4 ответа
Почему бы вам не прекратить размножаться, чтобы предотвратить запутывание события от ребенка, чтобы достичь этого
$(document).ready(function(){
$('.parent').on('click', function(){
alert('parent div');
});
$('.child').on('click', function(ev){
ev.stopPropagation();
alert('child div');
});
});
Да. Дирадж прав. используйте функцию topPropagation ()
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('.parent').on('click', function(){
alert('parent div');
$('.child').click();
});
$('.child').on('click', function(e){
e.stopPropagation()
alert('child div');
});
});
</script>
</head>
<body>
<div class="parent">
<a href="#">parent</a>
<div class="child">child</div>
</div>
</body>
</html>
После того, как вы щелкнете по дочернему элементу div, событие всплывет через дерево DOM, что вызывает срабатывание родительского элемента div, теперь, чтобы предотвратить это, вам нужно остановить распространение, используя event.stopPropagation()
, подробнее об этом читайте здесь
$('.child').on('click', function(event){
event.stopPropagation();
alert('child div');
return false;
});
Гаутама ,
Интересная проблема. Я думал о подклассах. Но поскольку у вас есть элементы div, обернутые друг в друга, это невозможно. Поэтому я рекомендую следующие функции, которые будут переключать ответ до следующего щелчка по нему.
makeParentReady = function() {
$('.parent').on('click', function(){
myClass=this.className;
alert('parent div');
});
}
$(document).ready(function(){
makeParentReady();
$('.child').on('click', function(){
myClass=this.className;
alert('child div');
$(this).parents('.parent').off('click');
makeParentReady();
return false;
});
});
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.