Відповіді:
Використовуйте event.stopPropagation () .
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>
Для IE: window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>
event
Здається, вони також доступні в рамках Inline Safari.
Існує два способи отримати об'єкт події всередині функції:
Якщо вам потрібно підтримувати застарілі браузери, які не відповідають рекомендаціям W3C, як правило, всередині функції ви використовуєте щось на зразок наступного:
function(e) {
var event = e || window.event;
[...];
}
який би перевіряв спочатку один, а потім другий і зберігає те, що було знайдено всередині змінної події. Однак у обробнику вбудованих подій немає e
об'єкта для використання. У такому випадку ви повинні скористатися arguments
колекцією, яка завжди доступна і стосується повного набору аргументів, переданих функції:
onclick="var event = arguments[0] || window.event; [...]"
Однак, загалом кажучи, вам слід уникати обробників подій, що вбудовуються, якщо вам потрібно зробити щось складне, як, наприклад, зупинити поширення. Писати ваші обробники подій окремо та приєднувати їх до елементів - це набагато краща ідея у середньо- та довгостроковій перспективі, як щодо читабельності, так і ремонтопридатності.
onclick="foo(event)"
а потім у функцію function foo(event){/* do stuff with event */}
. Це працює в моделях подій IE і W3C.
Майте на увазі, що window.event не підтримується у FireFox, і тому він повинен бути чимось уздовж:
e.cancelBubble = true
Або ви можете використовувати стандарт W3C для FireFox:
e.stopPropagation();
Якщо ви хочете пофантазувати, ви можете зробити це:
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}
<div onclick="myEventHandler(event);">
e.cancelBubble
повертає помилку в IE! Він не може досягти e.cancelBubble = true;
інструкції. Замість цього скористайтеся умовою SoftwareARM !!
Використовуючи цю функцію, вона перевірить наявність правильного методу.
function disabledEventPropagation(event)
{
if (event.stopPropagation){
event.stopPropagation();
}
else if(window.event){
window.event.cancelBubble=true;
}
}
У мене була така ж проблема - поле помилок js в IE - це добре працює у всіх браузерах, наскільки я бачу (event.cancelBubble = вірно виконує роботу в IE)
onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"
Це працювало для мене
<script>
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>
<div onclick="alert('Click!')">
<div onclick="cancelBubble(event)">Something inside the other div</div>
</div>
Для веб-сторінок ASP.NET (не MVC) ви можете використовувати Sys.UI.DomEvent
об'єкт як обгортку нативного події.
<div onclick="event.stopPropagation();" ...
або передайте подію як параметр внутрішній функції:
<div onclick="someFunction(event);" ...
а в деякихФункції:
function someFunction(event){
event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
// other onclick logic
}
Відповідно до цієї сторінки , в IE вам потрібно:
event.cancelBubble = вірно
Я не можу коментувати через Кару, тому я пишу це як цілу відповідь: Відповідно до відповіді Гарета (var e = аргументи [0] || window.event; [...]), я використав цей oneliner inline на onclick для швидкий злом:
<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>
Я знаю, що пізно, але я хотів повідомити вам, що це працює в один рядок. Брекети повертають подію, у якій в обох випадках додається функція stopPropagation, тому я спробував інкапсулювати їх у дужки, як у випадку if і .... він працює. :)
Це також працює - У посиланні HTML використовуйте onclick із поверненням так:
<a href="mypage.html" onclick="return confirmClick();">Delete</a>
І тоді функція comfirmClick () повинна бути такою:
function confirmClick() {
if(confirm("Do you really want to delete this task?")) {
return true;
} else {
return false;
}
};
confirm
не актуально. Я маю на увазі повернене значення . цитата: У посиланні HTML використовуйте onclick із поверненням так
Чому б не просто перевірити, на який елемент було натиснуто? Якщо натиснути щось, window.event.target
присвоюється елементу, на який було натиснуто, і елемент, який натиснув, також може бути переданий як аргумент.
Якщо мета і елемент не рівні, це подія, яка поширюється вгору.
function myfunc(el){
if (window.event.target === el){
// perform action
}
}
<div onclick="myfunc(this)" />
Найкращим рішенням було б впоратися з подією через функцію javascript, але для того, щоб використовувати просте і швидке рішення безпосередньо з використанням html-елемента, і як тільки «подія» і «window.event» застаріли і не підтримуються повсюдно ( https://developer.mozilla.org/en-US/docs/Web/API/Window/event ), пропоную такий "жорсткий код":
<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>