其他地方點擊事件？

我有一個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

其他地方點擊事件？

回答

相關問題