其他地方点击事件？

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

原型和scriptaculous库都包括..许多下面的答案不适用于他们......元素的ID是UNDEFINED，因此它不能用于JavaScript中的参考。

感谢，颜

2010-12-17 Yan

使用jQuery的切换。 – RPM1984 2010-12-17 08:33:25

我有不是所有的浏览器进行测试，但如果你不想引入任何新的JS框架，这种解决方案只使用CSS：

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

的属性TabIndex使得li元素FO cusable。和css：

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

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

来源

2010-12-17 09:00:19 DanneManne

好的答案，但只支持在IE8和更高版本。 – Paddy 2010-12-17 09:11:32

啊，很高兴知道。只在Chrome自己测试它。 – DanneManne 2010-12-17 09:22:17

我会用:not selector

来源

2010-12-17 08:31:06

使用已经原型...不想把事情弄糟... – Yan 2010-12-17 08:32:34

使用jQuery的现场活动并绑定click事件当点击它的一个项目，它获得焦点。当点击其他东西时会丢失重点，触发onblur事件。可能不适用于所有元素，但它适用于例如<input>元素。

来源

2010-12-17 08:32:38 Mud

没有“li”元素：http://jsbin.com/ojohe5/ – Yan 2010-12-17 08:43:04

伟大的问题！您可以使用“事件冒泡”，这意味着，而不是你的元素的onclick事件，你一个更高的对象上定义一个事件处理（比如，document或table），并有你这样说：

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

这里更多（和其他国家）：http://www.southsearepublic.org/tag/Javascript%20Event%20Bubbling/read

来源

2010-12-17 08:34:57

你想要的onblur事件：“当一个对象失去焦点时onblur事件”。

来源

2010-12-17 08:35:44 gkrogers

不适用于“li”元素： http://jsbin.com/ojohe5/ – Yan 2010-12-17 08:44:25

我并不是说这是最好的解决方案，但是如果您在li元素上设置了tabIndex，则它是可以聚焦的。 – DanneManne 2010-12-17 08:53:19

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

来源

2010-12-17 08:36:12 cortices

onblur不工作... – Yan 2010-12-17 08:38:29

仍然不是：http://jsbin.com/ojohe5/ – Yan 2010-12-17 08:43:55

这里是你如何能做到这一点jQuery中：

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

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

来源

2010-12-17 08:44:27

但这会绑定到特定的ID？我有一个动态列表，所以不知道ID – Yan 2010-12-17 08:46:14

好吧，你会改变#specialItem到你的代码需要的任何东西。 – 2010-12-17 08:47:14

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

有在http://jsbin.com/oxobi3

来源

2010-12-17 08:45:26 Kevin

如果没有href，该怎么办？ http://jsbin.com/oxobi3/2/ – Yan 2010-12-17 08:54:36

我对它做了一些修改。 http://jsbin.com/oxobi3/3 – Kevin 2010-12-17 09:28:43

实际上，在jsbin.com/oxobi3/2中，只需要将选择器从“a.link”更改为“li.link”，并将宽度值设置为“li”为了使'身体'点击。 – Kevin 2010-12-17 09:31:52

一个活生生的例子它是因为我已经使用原型相当长的时间，但我希望这可以帮助你（在非jQuery的感觉。）

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

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


}

来源

2010-12-17 08:57:20

我的做法

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(); 
    } 
});

这将确保当你点击某个地方在屏幕上不是你的元素，则风格就会变回

来源

2010-12-17 11:08:23 Tarun

其他地方点击事件？

回答

相关问题