Question

我似乎无法弄清楚如何将onblur事件添加到我的css div only selectbox。

我的包装器div的正常onblur方法不起作用：

<!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>

Answer 1

尽管我通常在jquery中做这些事情，但我会尝试在评论中使用“点击外部”的想法。

<!--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
}

这是完全未经测试的，可能不是解决方案，但值得一试。

进一步阅读event.stopPropagation()，并将其用于“点击外部”模式：http://unencode.blogspot.com/2012/10/javascript-eventstoppropogation.html。（FWIW，“点击外部”模式显然是我编写的名称，因为谷歌搜索它并没有给我任何有用的结果。但IDEA相当普遍。有多个jquery插件致力于这个想法：{{3} }。）

编辑：代码的意图对我来说并不是很明显。我现在看到应该发生什么。因此：1）从e.stopPropagation方法中删除textToTextArea。 2）将其放入showcommentsbox代替（这意味着您需要将event传递给它。）

<!--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";
}

将onblur事件添加到选择框div仅模拟

1 个答案: