Question

我有一个onClick事件来改变风格。如何在用户点击某个项目的其他位置时更改样式？

包括原型和scriptaculous库..以下许多答案不适用于它们...还有一个元素的ID是UNDEFINED因此它不能用于javascript中的参考。

谢谢，Yan

Answer 1

我没有在所有浏览器中测试过这个，但是如果你不想引入任何新的js框架，这个解决方案只使用CSS：

<ul>
  <li tabindex="1">First</li>
  <li tabindex="2">Second</li>
</ul>

属性tabIndex使li元素可以聚焦。而css：

li { color: #F00; }
li:focus { color: #0F0 }

这当然是非常基本的造型，可能想把它放在课堂上或其他什么。

Answer 2

单击某个项目时，它会获得焦点。当点击其他内容时，它将失去焦点，触发onblur事件。可能不适用于所有元素，但它适用于<input>元素。

Answer 3

好问题！您可以使用“事件冒泡”，这意味着您可以在更高的对象（例如，document或table）上定义事件处理程序而不是元素上的onclick事件，并且您说类似的东西：

if (event.target === myElement) {
    changeStyle();
} else {
    changeStyleBack();
}

更多信息（以及其他地方）：http://www.southsearepublic.org/tag/Javascript%20Event%20Bubbling/read

Answer 4

您想要onblur事件：“当对象失去焦点时会发生onblur事件。”

Answer 5

您可以在body上绑定onClick事件，并将恢复该样式的函数指定给该事件。

http://jsbin.com/oxobi3

有一个实例

Answer 6

我会使用jQuery直播事件并使用 :not selector

绑定点击事件

Answer 7

也许在标记中尝试onclick="function1()" onblur="function2()"或onfocus="function1()" onblur="function2()"。

Answer 8

以下是如何在jQuery中执行此操作：

$(document).click(function(e) {
  if ($(e.target).is("#specialItem")) {
    $(e.target).addClass("specialClass");
  } else {
    $(#specialItem").removeClass("specialClass");
  }
});

如果您不使用jQuery，您仍然可以使用基本模型 - 在文档级别应用onclick事件逻辑。这适用于不响应模糊事件的项目。

Answer 9

自从我使用原型以来已经有很长一段时间，但我希望这对你有帮助（在非jQuery意义上。）

$(window).observe('click', respondToClick);

function respondToClick(event) {
 var element = event.element();
 if(!($(this) == element)){
     element.addClassName('active');//or do your stuff here
 }


}

Answer 10

我的方法

var elsewhere = 1;
$(myelement).bind('hoverin',function(){
    elsewhere = 0;
});
$(myelement).bind('hoverout',function(){
    elsewhere = 1;
});

$('screenarea').click(function(){
    if(elsewhere){
        change-style-back();
    } else{
        change-style();
    }
});

这将确保当您点击屏幕上的某个位置并且不在您的元素上时，该样式将更改回来

其他点击事件？

10 个答案: