Javascript 将onblur事件添加到selectbox div only实体模型
我似乎不太明白为什么要在cssdivonly选择框中添加onblur事件 我的包装器div的正常onblur方法不起作用：Javascript 将onblur事件添加到selectbox div only实体模型,javascript,dom,Javascript,Dom,我似乎不太明白为什么要在cssdivonly选择框中添加onblur事件 我的包装器div的正常onblur方法不起作用： <!DOCTYPE html> <html> <head> <style type="text/css"> #container { width: 200px; float: left; font-family: Arial; font-size: 10pt; position:r
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
float: left;
position:absolute;
}
#commentsbox, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#commentsbox, ul, li {
padding: 2px;
}
#commentsbox li:hover{
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}
</style>
<script type="text/javascript">
function showcommentsbox(){
document.getElementById("one").style.display="block";
}
function hidecommentsbox(){
document.getElementById("one").style.display="none";
}
// pick a name that's useful to you:
function textToTextArea (e) {
e = e ? e : event;
var text = e.target ? e.target : e.srcElement;
document.getElementById('result').innerHTML = text.innerText
}
</script>
</head>
<body>
<div id="container">
<div id="one" onclick="hidecommentsbox()">
<ul onclick="textToTextArea(event)" id="commentsbox" onblur="hidecommentsbox()">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div id="two"><img src="images/arrow_double.png" onclick="showcommentsbox()"></div>
<br>
<textarea id="result"></textarea>
</body>
</html>
#容器{
宽度：200px；
浮动：左；
字体系列：Arial；
字号：10pt；
位置：相对位置；
}
#一个{
高度：200px；
边框：1px纯红；
显示：无；
位置：绝对位置；
背景：#C0C0；
}
#两个{
宽度：8px；
高度：8px；
浮动：左；
位置：绝对位置；
}
#评论箱，ul{
列表样式：无；
保证金：0；
游标：默认值；
宽度：194px；
填充：6px；
}
#评论箱，ul，li{
填充：2px；
}
#评论框李：悬停{
背景：蓝色；
颜色：#fff；
}
#结果{
边框：1px实心#000；
宽度：206px；
}
函数showcommentsbox（）{
document.getElementById（“一”）.style.display=“块”；
}
函数hidecommentsbox（）{
document.getElementById（“一”）.style.display=“无”；
}
//选择一个对您有用的名称：
功能textToTextArea（e）{
e=e？e：事件；
var text=e.target？e.target:e.src元素；
document.getElementById（'result'）.innerHTML=text.innerText
}
- 项目1
- 项目2
<!--Basically, detect any click that is NOT on your ul and hide the comment box-->
<body onclick="hidecommentsbox()">
<div id="container">
<div id="one" onclick="hidecommentsbox()">
<ul onclick="textToTextArea(event)" id="commentsbox">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
function textToTextArea (e) {
// Add this line to prevent event bubbling.
// Normally, events "bubble" up the dom so clicking
// the ul will ALSO trigger the click event on the "body".
// This prevents that so that clicks to this element
// trigger this function, while clicks on anything else
// hide the comment box.
e.stopPropagation();
e = e ? e : event;
var text = e.target ? e.target : e.srcElement;
document.getElementById('result').innerHTML = text.innerText
}
您可以创建一个模糊事件吗？非常肯定（至少在某些浏览器中）模糊事件不会在每种元素类型上都起作用。模糊主要用于可以接收焦点的元素（输入、按钮等）。我认为div、ul等上的模糊（充其量）是参差不齐的。不幸的是，我不知道最好的选择是什么。可能是“单击外部”模式。我无法使用您的代码打开弹出选择框。它永远保持关闭状态……实际上，它打开和重新关闭的速度比你想象的要快。这意味着事件仍在冒泡。我想我终于明白你的代码应该做什么了。我将相应地编辑答案。
<!--Basically, detect any click that is NOT on your ul and hide the comment box-->
<body onclick="hidecommentsbox()">
<div id="container">
<div id="one" onclick="hidecommentsbox()">
<ul onclick="textToTextArea(event)" id="commentsbox">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<!--I misunderstood what was triggering the comment box. This is the click you need
to prevent propagation on-->
<div id="two"><img src="images/arrow_double.png" onclick="showcommentsbox(event)"></div>
<br>
<textarea id="result"></textarea>
</body>
function textToTextArea (e) {
e = e ? e : event;
var text = e.target ? e.target : e.srcElement;
document.getElementById('result').innerHTML = text.innerText
}
function showcommentsbox(e){
e.stopPropagation();
document.getElementById("one").style.display="block";
}