如何在类上使用 onclick，但仅在某些元素上使用答案

【问题标题】：How to use onclick on a Class but only on certain elements如何在类上使用 onclick，但仅在某些元素上使用
【发布时间】：2014-09-04 08:01:20
【问题描述】：

这就是我的 HTML 代码的样子，在真实的代码中有几个这样的块。当您单击此 DIV 中的某个位置时，将调用 toolleDescription(this)。我的问题是，当您单击其中一个 ANCHORS (a) 时，我不希望发生任何事情，那么是否可以在 Javascript 中定义某些 DIV 不会发生任何事情？

<div class="dokumente_table">
    <div class="dokumente_group onclick="toggleDescription(this)">
        <img class="dokumente_triangle" src="/_files/img/triangle_13.png">
        <div class="button_group">
            <a class="button">Content...</a>
            <a class="button">Content...</a>
        </div>
        <div class="dokumente_download_frame">
            <a class="dokumente_download">Content...></a>
        </div>
        <div class="dokumente_row">
            Content...
        </div>
        <div class="dokumente_row">
            Content...
        <div class="dokumente_extra_row">
            Content...
        </div>
    </div>
</div>

所以这是被调用的 Javascript。

function toggleDescription(that) {
    if($(that).find('.dokumente_extra_row').is(':visible')) {    
        $(that).find('.dokumente_extra_row').slideUp(500);
        $(that).find('.dokumente_triangle').rotate({
            duration: 1000,
            angle: 90,
            animateTo: 0
        });
    }
    else {
        $(that).find('.dokumente_extra_row').slideDown(500);
        $(that).find('.dokumente_triangle').rotate({
            duration: 1000,
            angle: 0,
            animateTo: 90
        });
    }
}

【问题讨论】：

看看这个stackoverflow.com/questions/12758547/…
jsfiddle.net/satpalsingh/0v8vbnp8
将 on('click', function(e){e.preventDefault()}) 事件绑定到您不希望点击时发生任何事情的锚点。

标签： javascript jquery html

【解决方案1】：

如果您不希望在单击特定锚点时执行toggleDescription，则可以在特定锚点的单击事件中使用事件对象的stopPropagation() 方法来防止单击传播。

例如，如果您想跳过以下锚点的执行

<a class="dokumente_download">Content...></a>

你可以的

$(".dokumente_download").click(function(e){
 e.stopPropagation();
});

【讨论】：

【解决方案2】：

您需要按如下所述更改此行：

 <div class="dokumente_group onclick="toggleDescription(this,event)">

那么你的函数必须是：

function toggleDescription(that,event) {
    if(!$('a').is(event.target)){
        if($(that).find('.dokumente_extra_row').is(':visible')) {    
            $(that).find('.dokumente_extra_row').slideUp(500);
            $(that).find('.dokumente_triangle').rotate({
                duration: 1000,
                angle: 90,
                animateTo: 0
            });
        }
        else {
            $(that).find('.dokumente_extra_row').slideDown(500);
            $(that).find('.dokumente_triangle').rotate({
                duration: 1000,
                angle: 0,
                animateTo: 90
            });
        }
    }
}

【讨论】：