Как связать событие .click() только с контейнером?

Я хочу запись пользователя, чтобы открыть аккордеон стиле, но .click() событие срабатывает, даже если я нажимаю на любой другой элемент внутри красной коробке - текст, изображения и т.д.Как связать событие .click() только с контейнером?

Я хотел бы только «внешние» пробелы вызывают событие.

Как это сделать?

$('#box').click(function(e) { 
 
    console.log(e); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box" style="width:80%;background:red;"> 
 
    <table> 
 
    <tr> 
 
     <td><img src="http://i.imgur.com/NaCmGyX.jpg" style="width:50px;height:50px;border-radius:50%;"></td> 
 
     <td><b>John McDerpenstein</b></td> 
 
     <td><p> 
 
     A blurb goes here 
 
     </p></td> 
 
    </tr> 
 
    </table> 
 
</div>

fiddle

источник

2016-07-14 McDerp

Введите код вместе с JSFiddle. –

событие распространяется на родительский элемент. – Andreas

Могу ли я предложить очень простое изменение для вашего скрипта для целей тестирования: измените 'console.log (e)' на нечто вроде 'console.log ('test')', в противном случае некоторые браузеры (включая мои) зависают для второй или два, и это немного расстраивает. –

Вы можете проверить target свойство события, чтобы увидеть, если он был #box элемент непосредственно с помощью is():

$('#box').click(function(e) { 
    if ($(this).is(e.target)) 
     console.log(e); 
});

Updated fiddle

источник

2016-07-14 14:49:55

<html> 
<body> 
<div id="box" style="width:80%;background:red;"> 
    <table> 
    <tr> 
     <td><img src="http://i.imgur.com/NaCmGyX.jpg" style="width:50px;height:50px;border-radius:50%;"></td> 
     <td><b>John McDerpenstein</b></td> 
     <td><p> 
     A blurb goes here 
     </p></td> 
    </tr> 
    </table> 
</div> 
<script src="jquery-1.12.3.min.js"></script> 
<script> 
$('img').click(function(e) { 
    console.log(e); 
}); 
</script> 

</html>

источник

2016-07-14 14:49:44 Ray

Какое внешнее пустое пространство? – Ray

Вы имели в виду изображение? – Ray

Пожалуйста, внимательно прочитайте вопрос перед ответом. На вопросы, которые вы задали в своих комментариях, можно ответить, просмотрев сам исходный вопрос. –

Просто проверьте наличие e.target.id, чтобы увидеть, соответствует ли он указанному id наружной коробке. Пример ниже:

$('#box').click(function(e) { 
 
    if (e.target.id === "box") 
 
    console.log('click'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box" style="width:80%;background:red;">this is the outer box 
 
    <table> 
 
    <tr> 
 
     <td><img src="http://i.imgur.com/NaCmGyX.jpg" style="width:50px;height:50px;border-radius:50%;"></td> 
 
     <td><b>John McDerpenstein</b></td> 
 
     <td><p> 
 
     A blurb goes here 
 
     </p></td> 
 
    </tr> 
 
    </table> 
 
</div>

источник

2016-07-14 14:50:23

Если вы хотите, чтобы добавить событие в родительский контейнер вы должны остановить распространение на всех дочерних элементов, которые не будут нуждаться событие щелчка ,

Пример:

поскольку #box имеет щелчок и окно Ваш контейнер

вам нужно будет давать изображение идентификатор и прекращения распространения

$('#imageID').click(function(e){ 

e.stopPropagation(); 

})

В примере выше, когда вы нажимаете изображение, ничего не произойдет, но если вы нажмете на красный контейнер, ваше событие запишет журнал.

источник

2016-07-14 14:56:48 KpTheConstructor

Лучший способ предотвратить событие, если клик делается на ребенка:

$('#box').click(function(e) { 
    if (!$(this).is(e.target)) { 
     return e.preventDefault() 
    } 

    // code here (or nothing, href="" action) 

});

источник

2016-07-14 15:33:27 Arthur

Как связать событие .click() только с контейнером?

ответ

Смежные вопросы