У меня проблема с обработкой события clcik. У меня есть div и ссылка внутри. Я хочу отключить ссылку, и вместо этого, когда бы ни щелкали по div, должна выполняться функция. Таким образом, чтобы отключить ссылку, я возвращаю false при каждом щелчке по ссылке, но в то же время я хочу, чтобы при щелчке по ссылке выполнялся родительский div. Вот мой код и ссылка на скрипку:

$(".div").click(function(){
   alert("Hello");

});

$("a").click(function(e){
   return false;

});

играть на скрипке

Как вы можете видеть, щелкаю ли я где-нибудь в div, он работает, за исключением области, где существует ссылка.

Кто-нибудь может мне помочь?

*******************ОБНОВИТЬ****************************** *****

Поэтому независимо от того, где нажата кнопка, каждый щелчок в любом месте в div должен выполнять оповещение

1
Hamed Minaee 10 Янв 2017 в 17:07

4 ответа

Лучший ответ

Вы не должны return false в функции обратного вызова вашего события, это вызывает предотвращение пузырей. Это причина того, что событие родителя не вызывается.

Чтобы предотвратить перенаправление на a клик, вы должны запретить поведение по умолчанию, например:

$("a").click(function(e) {
    e.preventDefault();
});

Проверьте фрагмент:

$(".div").click(function(){
   alert("Hello");
});

$("a").click(function(e) {
   e.preventDefault();
});
.div {
  width: 300px; 
  height: 300px; 
  display: block; 
  background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <a href="http://google.com">link</a>
</div>
1
Mateusz Woźniak 10 Янв 2017 в 14:20

Вы не должны возвращать значение false, просто protectDefault для ссылки (если этот метод вызывается, по умолчанию действие события не будет инициировано.)

return false из обработчика событий jQuery фактически совпадает с вызовом e.preventDefault и e.stopPropagation для переданного jQuery.Event объект .

$(".div").click(function(){
alert("Hello");
});

$("a").click(function(e){
e.preventDefault();
});
1
Vladu Ionut 10 Янв 2017 в 14:13

Попробуйте использовать pointer-events: none; атрибут css без события $("a").click().

a.disabled{
  color: #fff;
  pointer-events: none;
}

https://jsfiddle.net/5n1kpcsp/4/

1
Igor Konopko 10 Янв 2017 в 14:17

Да

Изменить это:

$("a").click(function(e){
  return false;
});

К этому:

$("a").click(function(e){
  $(".div").click();
  return false;
});
1
Z-Bone 10 Янв 2017 в 14:10