Question

我的HTML也是如此

<tr class="show_ticket_preview">
    <td>
         <a class="ticket_preview_id">A Link</a>
         <p>Some other stuf</p>
    </td>
</tr>

我需要在单击tr时触发click事件，但是在<a>中单击tr时不需要触发

$(document).on('click', '.show_ticket_preview:not(.ticket_preview_id)', function() {

但是无论出于何种原因，当我根据上面的代码单击ticket_preview_id时，事件仍在触发。

有什么想法吗？

Answer 1

.show_ticket_preview:not(.ticket_preview_id)选择器将选择所有具有show_ticket_preview类但没有ticket_preview_id类的元素，因此在您的情况下不起作用。

要解决您的问题，可以在句柄中使用事件对象，然后检查目标是否具有类ticket_preview_id：

$(document).on('click', '.show_ticket_preview', function(e) {
  if(!e.target.classList.contains("ticket_preview_id")) console.log(1);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show_ticket_preview">
    <div>
         <a class="ticket_preview_id">A Link</a>
         <p>Some other stuf</p>
    </div>
</div>

Answer 2

具有与ticket_preview_id关联的另一个点击事件，并使用stopPropagation方法。

$(document).on('click', '.show_ticket_preview', function() {
    // Do Something
})

$(document).on('click', '.ticket_preview_id', function(e) {
    e.stopPropagation()
})

您可以在此处查看有关stopPropagation的更多信息... https://api.jquery.com/event.stopPropagation/

不是选择器，on（）点击事件不起作用

2 个答案: