Как остановить распространение события с помощью встроенного атрибута onclick?

Используйте 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>

Согласно эта страница, в IE нужно:

event.cancelBubble = true

Имейте в виду, что 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;
    }
}

Получить объект события из функции можно двумя способами:

1. Первый аргумент в браузере, совместимом с W3C (Chrome, Firefox, Safari, IE9 +)
2. Объект window.event в Internet Explorer (<= 8)

Если вам нужно поддерживать устаревшие браузеры, которые не следуют рекомендациям W3C, обычно внутри функции вы должны использовать что-то вроде следующего:

function(e) {
  var event = e || window.event;
  [...];
}

который будет проверять сначала одно, а затем другое и сохранять то, что было найдено внутри переменной события. Однако во встроенном обработчике событий нет объекта e для использования. В этом случае вы должны воспользоваться коллекцией arguments, которая всегда доступна и относится к полному набору аргументов, переданных функции:

onclick = "var event = arguments[0] || window.event; [...]"

Однако, вообще говоря, вам следует избегать встроенных обработчиков событий, если вам нужно что-то сложное, например, остановка распространения. Написание обработчиков событий отдельно и присоединение их к элементам - гораздо лучшая идея в среднесрочной и долгосрочной перспективе, как для удобочитаемости, так и для удобства обслуживания.

Используйте эту функцию, она проверит наличие правильного метода.

function disabledEventPropagation(event)
{
   if (event.stopPropagation){
       event.stopPropagation();
   }
   else if (window.event){
      window.event.cancelBubble=true;
   }
}

У меня была такая же проблема - окно ошибки js в IE - это отлично работает во всех браузерах, насколько я могу видеть (event.cancelBubble = true выполняет свою работу в IE)

onClick = "if (event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"

Это также работает - в 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;
    }
};

Для веб-страниц 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
}

Это сработало для меня

<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>

<div onclick = "alert('you clicked the header')" class = "header">
  <span onclick = "alert('you clicked inside the header'); event.stopPropagation()">
    something inside the header
  </span>
</div>

Почему бы просто не проверить, какой элемент был нажат? Если вы щелкнете по чему-либо, window.event.target будет назначен элементу, по которому щелкнули, а также элемент, по которому щелкнули, также может быть передан в качестве аргумента.

Если цель и элемент не равны, это было событие, которое распространялось вверх.

function myfunc(el){
  if (window.event.target === el){
      // perform action
  }
}
<div onclick = "myfunc(this)" />

Я не могу комментировать из-за Кармы, поэтому я пишу это как полный ответ: Согласно ответу Гарета (var e = arguments [0] || window.event; [...]) Я использовал этот oneliner, встроенный в onclick для быстрый взлом:

<div onclick = "(arguments[0] || window.event).stopPropagation();">..</div>

Я знаю, что уже поздно, но я хотел сообщить вам, что это работает в одной строке. Фигурные скобки возвращают событие, к которому в обоих случаях прикреплена функция stopPropagation, поэтому я попытался заключить их в фигурные скобки, как в if и .... это работает. :)

Лучшим решением будет обработка события с помощью функции 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>

Используйте отдельный обработчик, например:

function myOnClickHandler(th){
//say let t=$(th)
}

а в html сделайте это:

<...onclick = "myOnClickHandler(this); event.stopPropagation();"...>

Или даже :

function myOnClickHandler(e){
  e.stopPropagation();
}

для:

<...onclick = "myOnClickHandler(event)"...>