Как обрабатывать дочерний элемент как отдельный от его родителя в html [duplicate]

Использование return false; или e.stopPropogation(); не позволит выполнить дальнейший код. Он остановит поток в этой точке.

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>

Используйте метод stopPropagation , см. пример:

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

Как сказано в jQuery Docs:

stopPropagation метод предотвращает событие от барботажа дерева DOM, предотвращающее уведомление родительских обработчиков о событии.

Имейте в виду, что это не мешает другим слушателям обрабатывать это событие (например, более одного обработчик клика для кнопки), если это не желаемый эффект, вы должны использовать stopImmediatePropagation.

Написание, если кому-то понадобится (работал для меня):

event.stopImmediatePropagation()

Из этого решения.

Если вы в любом случае не собираетесь взаимодействовать с внутренним элементом / s, тогда вам может быть полезно решение CSS.

Просто установите внутренний элемент / s в pointer-events: none

в вашем случае:

.clickable > a {
    pointer-events: none;
}

или для цели всех внутренних элементов:

.clickable * {
    pointer-events: none;
}

Этот легкий взлом спас меня много времени при разработке с помощью ReactJS

Поддержка браузера можно найти здесь: http://caniuse.com/#feat=pointer-events

Если у вас есть несколько элементов в интерактивном div, вы должны сделать это:

$('#clickable *').click(function(e){ e.stopPropagation(); });

Вам нужно остановить событие от достижения (пузырьки) родителя (div). См. Здесь информацию о пузырьках здесь и jQuery-специфическую информацию API здесь .

Все решение сложное и jscript. Вот простейшая версия:

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

вы также можете попробовать

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

Здесь мое решение для всех, кто ищет код не-jQuery (чистый javascript)

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

Ваш код не будет выполнен, если нажать на дочерние элементы родителя

Вот пример использования Angular 2 +

Например, если вы хотите закрыть Modal Component, если пользователь нажимает на него:

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

добавьте a следующим образом:

<a href="http://foo.com" onclick="return false;">....</a>

или return false; из обработчика кликов для #clickable, например:

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

Чтобы указать некоторый вспомогательный элемент как unclickable, пишите иерархию css, как в примере ниже.

В этом примере я прекращаю распространение любых элементов (*) внутри td внутри tr внутри таблицы с классом " .subtable "

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

Если у кого-то возникла эта проблема с использованием React, я решил ее так.

scss:

ArrayList<Integer> inputA = input.subList(0, input.size()/2);
// where 'input' is a prepouplated ArrayList<Integer>