0

我有一个包含多个 div 的网页。当用户点击 body 时，所有 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');
    }
});
4

4 回答 4

3

试试这个 - 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');
});

文档

于 2012-07-27T16:16:35.423 回答
0

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

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

于 2012-07-27T16:09:02.390 回答
0 
$('body').click(function() {
    $('div').css('border', '2px solid red');    
});

$('div').click(function(e){
    $(this).css('border', '2px solid blue');
    e.stopPropagation();
});
​
于 2012-07-27T16:15:15.527 回答
0

您可以使用以下代码来突出显示像 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";
    });
于 2012-07-27T16:45:21.290 回答