Home / Questions / 20529
Accepted
Oscar E. Alvarado
Asked: 2020-08-15 13:22:58 +0800 CST 2020-08-15 13:22:58 +0800 CST

具有另一个单击事件的标记内的单击事件？

  • 772

我正在创建一个包含图标的条形标签，这个标签有一个click关联的事件，当它被激活时，会向我显示一个细节。现在，当我想给图标提供一个事件时，问题就出现click了，这些事件包含在提到的标签中并且它的事件没有被激活，但是父标签的事件被激活了。

我想避免将图标移到标签之外，并想知道是否有办法通过跳过包含标签的事件来使其事件触发。

这是我的标签，click其中包含在页面另一部分显示详细信息的事件：

<div class="bar-agent" onclick="show_detail_agent();">
    <p class="agent-data"></p>
    <span id="delete_agent" class="icon-delete">
        <img src="img/trash.png" alt="">
    </span>     
</div>

我想要做的是访问clickspan 的事件，id="delete_agent"以便它删除这个标签。但由于它包含在 with 标记中，class="bar-agent"它不允许我访问跨度。

function _delete_agent(){
    $(".content-agents .bar-agent-content .bar-agent").on("click","#delete_agent", function(){
        console.log("aqui!");
    });
}
javascript

1 Answers

  1. Best Answer

    问题

    选择器时，它们应该用逗号分隔。例如，要选择类的所有元素content-agents AND all of bar-agent-content AND all of bar-agent：

    $(".content-agents, .bar-agent-content, .bar-agent")

    但是，当以这种方式选择时，事件与div主事件相关联，这将不允许我们阻止事件的传播或“气泡效应”（即事件升级到父元素）。

    $(".content-agents, .bar-agent-content, .bar-agent").on( ... );

    气泡效应

    在此处输入图像描述

    解决方案

    我们可以将事件直接分配给<span>包含图像的事件，如下所示：

    $(".content-agents, .bar-agent-content, .bar-agent").find("#delete_agent").click(function(e){
    // ...
});


    而且，一旦以这种方式绑定，为了防止气泡效应，事件必须返回false。

    $(".content-agents, .bar-agent-content, .bar-agent").find("#delete_agent").click(function(e){
    // ...

    return false;  // previene el efecto burbuja (propagación del evento).
});

    代码

    function _delete_agent(){
    $(".content-agents, .bar-agent-content, .bar-agent").find("#delete_agent").click(function(e){
        console.log("click en la imagen");
        // Prevenir el efecto burbuja
        return false;
    });
}


// Asociar el evento
$( document ).ready(function() {
    _delete_agent();
});

// Para mostrar texto cuando se hace click en el div
function show_detail_agent() {
    console.log('click en el div principal!');
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bar-agent" onclick="show_detail_agent();">
    &lt;div empieza acá
    <p class="agent-data">---agent---</p>
    <span id="delete_agent" class="icon-delete">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-logo-med.png" alt="">
    </span>
    acá termina el /div&gt;
</div>


    JavaScript 注释

    Returnfalse适用于函数。如果你想防止中的气泡效果，你应该使用：

    event.stopPropagation();
    • 2