单击以将边框添加到div

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

来源

2012-07-27 user1556393

你需要在这里使用jquery..in你的函数

，因为你的点击事件冒泡到其他的div

来源

2012-07-27 16:09:02

-1 - 然后在OP代码的事件被绑定到body元素，单击事件上的div出现冒泡的身体，但由于事件没有被绑定到div，这并未没关系。 'stopPropagation'不会影响任何事情，因为具有事件监听器的唯一元素是主体本身，所以没有更多的冒泡可做。此外，'stopPropagation'不是“jQuery方法”，而是标准DOM事件对象本身的方法。小问题，最后一点，但重要的是要了解什么是和不是真正的jQuery的一部分。 – 2012-07-27 16:23:41

感谢buddy ..我明白了.. – 2012-07-27 17:06:39

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

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

的event.stopPropagation（）方法

来源

2012-07-27 16:15:15 aquinas

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

Documen塔季翁

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

来源

2012-07-27 16:16:35

这，+1。确保使用'on'而不是'click' – 2012-07-27 16:17:19

如果div中实际存在元素会怎么样？像这样：http://jsfiddle.net/74pzJ/3/ – aquinas 2012-07-27 16:28:00

@aquinas OP没有提供任何标记，所以它只是一个例子。除此之外，不可能预见所有与*“假如”*相关的潜在打嗝。如果OP想为他的确切情况提供解决方案，他/她必须提供准确的标记 – 2012-07-27 16:32:36

您可以使用下面的代码突出像萤火虫的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-27 16:45:21 hkulekci

单击以将边框添加到div

回答

相关问题