Практическое руководство: отделение с onclick в другом отделении с onclick JavaScript
просто быстрый вопрос. У меня есть проблема с отделениями с onclick JavaScript друг в друге. Когда я нажимаю на внутреннее отделение, оно должно только стрелять, это - onclick JavaScript, но JavaScript внешнего отделения также запускается. Как пользователь может нажать на внутреннее отделение, не запуская JavaScript внешнего отделения?
<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
<div onclick="alert('inner');" style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>
6 ответов
В основном в javascript есть две модели событий. Захват событий и Пузырьков событий . В случае всплытия, если вы щелкнете внутри div, сначала сработает событие щелчка внутреннего div, а затем сработает внешний щелчок div. в то время как при захвате событий сначала запускается внешнее событие div, а затем - внутреннее событие div. Чтобы остановить распространение события, используйте этот код в своем методе щелчка.
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
Ознакомьтесь с информацией о распространении событий здесь
В частности, вам понадобится такой код в обработчиках событий, чтобы остановить распространение событий:
function myClickHandler(e)
{
// Here you'll do whatever you want to happen when they click
// now this part stops the click from propagating
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
return false; из функции onclick внутреннего div:
<div onclick="alert('inner'); return false;" ...
То, с чем вы имеете дело, называется распространением события.
Это случай всплытия событий.
Вы можете использовать
e.cancelBubble = true; //IE
и
e.stopPropagation(); //FF
Вот еще несколько ссылок, которые помогут вам в понимании javascript event bubbling.