DataTable Wie man Zeilenklick in Spalten verhindert, die Hyperlinks enthalten

Question

Ich habe es mit einer Javascript-Datentabelle mit anklickbaren Zeilen zu tun. Jede Zeile, auf die geklickt wird, leitet den Browser an eine andere Seite weiter. Eine Spalte der Zeile enthält einen Hyperlink. Wenn der Hyperlink angeklickt wird, möchte ich nicht, dass das Zeilenklickereignis ausgelöst oder verwaltet wird.

Hier ist, wie ich die Zeile Click-Ereignis

$(tableId+' tbody').on('click', 'tr', function (e) { 
      window.location.href = $(this).attr('url'); 
    }); 

Answer 1

Wenn Sie einen Ereignis-Listener hinzufügen Zu einem Elternteil "blubbert" das Ereignis standardmäßig nach unten und hängt das Ereignis an alle Kinder an n. In diesem Fall werden Sie also das Ereignis auf tr (Eltern) setzen und das Ereignis wird blasen und sich an die td (Kinder) anhängen. Also eine dieser td von dem, was ich verstehe, enthält Ihre href (Hyperlink) und so das click Ereignis zu blockieren, das ursprünglich auf dem Eltern festgelegt wurde, müssen Sie einen anderen Ereignis Listener speziell der event typeclick innerhalb der Funktion für dieses Ereignis Sie einfach brauche den Status event.stopPropagation() und es wird das tr Klick-Ereignis überschreiben, das durchgebrannt ist.

document.addEventListener('DOMContentLoaded',()=>{ 
    //SET EVENT ON PARENT(TR), EVENT BUBBLES BY DEFAULT DOWNWARDS THEREFORE TD's WILL INHERIT 
    document.getElementById('parent').addEventListener('click',()=>window.location.href = "wherever"); 

    //ADDING ANOTHER EVENT LISTENER OF THE SAME TYPE (CLICK) WHICH BLOCKS THE BUBBLING PROPOGATION DOWNARDS 
    document.getElementById('myhyperlink').addEventListener('click',(e)=>event.stopPropagation()); 
}); 

Answer 2

Verwenden preventDefault()

$(tableId+' tbody').on('click', 'tr', function (e) { 
    e.preventDefault(); 
    window.location.href = $(this).attr('url'); 
}); 

Answer 3

Sie schreiben Code folgende implementiert haben Wege können:

$(tableId+' tbody').on('click', 'tr', function (e) { 
    e.preventDefault(); 
    window.location.href = $(this).attr('url'); 
}); 

Answer 4

Sie müssen Reihe Klick für diese bestimmte Spalte

$('tableId+' tbody'').on('click', 'td', function() { 

     if ($(this).index() == 4) { // provide index of your column in which you prevent row click here is column of 4 index 
      return; 
     } 

      // you can do additional functionality by clicking on this column here       
    }); 

Answer 5

deaktivieren Wenn Sie auf Anker klicken verhindern möchten, dass eine Seite umgeleitet, müssen Sie einfach das Click-Ereignis fangen und deaktivieren Standardverhalten ist .

$("table td a").click(function(e){ 
    e.preventDefault(); 
}); 

Sie müssen nur Standardverhalten vermeiden, wenn Sie auch Ausbreitung von Ereignis aufhören würde, würde Ihre anderen Ereignis-Listener nicht aufgerufen. Sehen Sie weitere Informationen hier: What's the difference between event.stopPropagation and event.preventDefault?

Wenn Ihr Ziel Umleitung von Anker-Links nur zu deaktivieren, wenn das Javascript aktiviert ist, eine andere Lösung könnte sein, zu setzen onclick Attribut, das Standard-Umleitung deaktivieren würde. Dies scheint jedoch in webkitbasierten Browsern nicht zu funktionieren.

<a href="http://example.com" onclick="javascript:return false;">and example</a> 

Here is jsFiddle with example