Question

我有一个包含多个div的网页。当用户单击正文时，所有div元素的边框都将变为红色。但是，当用户单击div时，只有该div将其边框更改为蓝色。每个其他div元素将保留红色边框。到目前为止，这是我的代码：

$('body').click(function() {
    var $target = $(event.target);
    if (!target.closest($('div')).length) {
        //I want the border of all div on the page to change to red
        $('div'). css('border', '2px solid red');
    } else if (target.closest($('div')).length) {
        //Here just the div that was clicked on will have its border changed to blue
        $(this).css('border', '2px solid blue');
    }
});

Answer 1

试试这个 - http://jsfiddle.net/74pzJ/4/

$('body').on("click", function(e) {
    $("div").css('border', '2px solid red');
    $(e.target).closest("div").css('border', '2px solid blue');
});

<强>文档

on - http://api.jquery.com/on/
not - http://api.jquery.com/not-selector/
css - http://api.jquery.com/css/

Answer 2

你需要在函数中使用jquery ..的event.stopPropagation（）方法

因为您的点击事件正在冒泡到其他div

Answer 3

$('body').click(function() {
    $('div').css('border', '2px solid red');    
});

$('div').click(function(e){
    $(this).css('border', '2px solid blue');
    e.stopPropagation();
});

Answer 4

您可以使用以下代码突出显示像firebug这样的html标记。也许这对你有帮助。

    document.getElementById('clickable_content').addEventListener("mouseover", function(e) {
        e.stopPropagation();
        e.target.addEventListener("mouseout", function (e) {
            e.target.className = e.target.className.replace(new RegExp(" highlight\\b", "g"), "");
        });
        e.target.addEventListener("click",function(e){
            alert(e.target.className); // clicked div or what ever
        });
        e.target.className += " highlight";
    });

单击以将边框添加到div

4 个答案: