Два differents OnClick на двух отделениях, один по другому
У меня есть два отделения, большое и меньшее по другому, у каждого отделения есть свой собственный метод OnClick. Проблема, которую я имею, состоит в том, когда я нажал меньшее отделение, метод OnClick многочисленного отделения называют также.
Кто я могу избежать этого?
5 ответов
Лучший способ определить, какой элемент был щелкнут - это проанализировать цель события ("щелкнуть по событию"). Я подготовил небольшой пример для этого случая. Вы можете посмотреть его в коде ниже.
function amIclicked(e, element)
{
e = e || event;
var target = e.target || e.srcElement;
if(target.id==element.id)
return true;
else
return false;
}
function oneClick(event, element)
{
if(amIclicked(event, element))
{
alert('One is clicked');
}
}
function twoClick(event, element)
{
if(amIclicked(event, element))
{
alert('Two is clicked');
}
}
Этот javascript-метод можно вызвать перед выполнением скрипта
Пример
<style>
#one
{
width: 200px;
height: 300px;
background-color: red;
}
#two
{
width: 50px;
height: 70px;
background-color: yellow;
margin-left: 10;
margin-top: 20;
}
</style>
<div id="one" onclick="oneClick(event, this);">
one
<div id="two" onclick="twoClick(event, this);">
two
</div>
</div>
Надеюсь, это поможет.
] Ваша проблема в том, что событие [] щелчка [] распространится вверх по дереву элементов. Следовательно, каждый элемент, который содержит элемент, который был щелкнут, также вызовет событие []click[].[
] Самое простое решение - добавить []return false[] к вашему обработчику.[
] Если вы используете []jQuery[], то вы можете вызвать [] e. stopPropagation();[] в противном случае необходимо вызвать []e.stopPropagation()[], если она существует, и установить []event.cancelBubble = true[].[
]Для получения более подробной информации смотрите []здесь[].[
].Вы имеете дело с пузырем событий. Взгляните на эту статью: http://www.quirksmode.org/js/events_order.html.
В принципе, чтобы остановить передачу события родительскому элементу, вы можете использовать нечто подобное:
document.getElementById('foo').onClick = function(e) {
// Do your stuff
// A cross browser compatible way to stop propagation of the event:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
Вы сталкиваетесь с распространенным случаем распространения событий. Посмотрите quirksmode.org, чтобы получить полную информацию о том, что именно происходит. В основном, что вам нужно сделать в маленьком обработчике div's click handler это:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
Если вы решите использовать библиотеку javascript, такую как www.jquery.com, вы можете легко выполнить то, что вы пытаетесь сделать, используя опции предотвращения распространения.