![](/img/trans.png)
[英]React - ul with onBlur event is preventing onClick from firing on li
[英]How can I trigger onblur from a ul li?
我基本上是在点击时突出显示每个li
,并且想要在单击其他地方或标记时(通过影响background-color
属性)“取消突出显示”所点击的li
。
这种行为本质上是模仿<select>
的'突出显示行为......我不是在使用select
,因为我想在列出的项中嵌套HTML - 你不能用<option>
来做 。
我正在尝试使用onblur
,这是行不通的......
#list {
list-style-type: none;
}
......这是CSS:
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
function highlightSelection(selection) {
alert("It worked!");
$(selection).css("background-color","#FFFF00");
}
// this function is not being triggered:
function removeHighlight(selection) {
$(selection).css("background-color","none");
}
var ul = document.getElementById("list");
ul.onclick = function(event) {
var target = getEventTarget(event);
highlightSelection(target);
};
// this event is not working:
ul.onblur = function(event) {
var target = getEventTarget(event);
removeHighlight(target);
};
...这里是jQuery / javascript:
function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } function highlightSelection(selection) { alert("It worked!"); $(selection).css("background-color","#FFFF00"); } // this function is not being triggered: function removeHighlight(selection) { $(selection).css("background-color","none"); } var ul = document.getElementById("list"); ul.onclick = function(event) { var target = getEventTarget(event); highlightSelection(target); }; // this event is not working: ul.onblur = function(event) { var target = getEventTarget(event); removeHighlight(target); };
既然你已经在使用JQuery了......
<ul id = "list">
<li tabindex="1">asdf</li>
<li tabindex="2">qwerty</li>
<ul>
var ul = $("#list");
ul.on('click focus','li',function(){
$(this)
.css("background-color","#FFFF00")
.siblings().css('background','');
}).on('blur','li',function(){
$(this).css('background','');
});
当你离开列表项时,我不确定你想要的效果......似乎你只想让它突出显示。 您可以通过为列表项提供tabindex
属性来为列表项添加焦点功能。
在li
■不要模糊 ,因为他们不专注。 尝试使用mouseout
或mouseleave
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.