2017-12-19 2 views
0

Das Problem mit dem folgenden Code ist, wenn ich auf select Tag klicke, löst es <tr>onclick Ereignis, wie das zu lösen?Event onclick in <tr>

<table> 
 
    <tr onclick="window.location = 'http://example.com'"> 
 
    <td>...</td> 
 
    <td>...</td> 
 
    <td>...</td> 
 
    <td> 
 
     <select> 
 
      <option>...</option> 
 
      <option>...</option> 
 
      </select> 
 
    </td> 
 
    </tr> 
 
</table>

+0

Dies scheint bereits gestellt und beantwortet werden: https://stackoverflow.com/questions/13966734/child-element-click-event-trigger-the-parent-click-event –

+0

@Soolie, dass bearbeiten war total bedeutungslos und dein Kommentar zum Bearbeiten trifft nicht wirklich auf den Schnitt zu. Du hast keine Änderungen am Code vorgenommen und kaum einen der Grammatikfehler im Text korrigiert. –

+0

@NickA Umm ... Sorry, Kumpel ... Was ich tun wollte, ist, die Frage semantisch lesbarer zu machen. Wenn eine Frage gestellt wird, werfen die Leute keinen Code auf Ihr Gesicht und erklären es dann. Meine Ansichten. :) – Soolie

Antwort

3

Dies ist Ereignis sprudeln. Sie müssen sicherstellen, dass das Ereignis nicht aufgepeppt wird. Fügen Sie dieses Ereignis einfach in das Ereignis onclick hinzu.

<select onclick="event.stopPropagation(); event.stopImmediatePropagation();"> 

<div onclick="console.log('Clicked DIV.');"> 
 
    <select onclick="event.stopPropagation(); event.stopImmediatePropagation();"> 
 
    <option></option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    </select> 
 
</div> 
 

 
<table> 
 
    <tr onclick="console.log('Clicked TR.');"> 
 
    <td> 
 
     <select onclick="event.stopPropagation(); event.stopImmediatePropagation();"> 
 
     <option></option> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>

+3

Dies ist der richtige Ansatz, aber Sie sollten nicht sowohl 'stopPropagation()' und 'stopImmediatePropagation()' aufrufen müssen. Beide würden in diesem Fall funktionieren, um Blasenbildung zu verhindern. Die einzige Zeit, die 'stopImmediatePropagation()' benötigt wird, ist, wenn mehr als ein Event-Listener an ein Element angehängt ist, was hier nicht der Fall zu sein scheint. [Überprüfen Sie dies] (https://codplanet.io/preventdefault-vs-stopropagation-vs-stopimmediatepropagation/) für weitere Informationen. – AdamJ

+0

@AdamJ Vielen Dank für den Link. ':)' – Soolie

0

Sie event.stopPropagation() auf dem select-Element verwenden können, in der Capturing und Bubbling-Phase eine weitere Ausbreitung des aktuellen Ereignisses verhindert.

<tr onclick="window.location = 'http://example.com'"> 
<td>...</td> 
<td>...</td> 
<td>...</td> 
<td> 
    <select onclick="event.stopPropagation(); "> 
    <option>...</option> 
    <option>...</option> 
    </select> 
</td>  
</tr>