Question

在代码示例中，单击两个div会使背景颜色变为灰色。

第一次单击第二个div（内容可编辑）会将颜色更改回白色。单击第二个div（不是内容可编辑）不会。

有没有办法轻松实现第二个div的相同结果？

<div contenteditable="true" style="width:100px; height:100px; border: 1px solid red;" onclick="this.style.backgroundColor='gray'" onblur="this.style.backgroundColor='white'"></div>

<div style="width:100px; height:100px; border: 1px solid blue;" onclick="this.style.backgroundColor='gray'" onblur="this.style.backgroundColor='white'"></div>

https://jsfiddle.net/2u3e0d1v/

Answer 1

我不确定是否有办法完全模拟onblur ...我会使用类似于here的jQuery函数。

例如：

＆＃13;

$(document).mouseup(function (e)
  {
      var container = $(".noteditable");
 
      if (!container.is(e.target) // if the target of the click isn't the container...
          && container.has(e.target).length === 0) // ... nor a descendant of the container
      {
          container.css('background-color', 'white');
      }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" style="width:100px; height:100px; border: 1px solid red;" onclick="this.style.backgroundColor='gray'" onblur="this.style.backgroundColor='white'"></div>

<div class="noteditable" style="width:100px; height:100px; border: 1px solid blue;" onclick="this.style.backgroundColor='gray'"></div>

＆＃13;

或者在纯JS中类似于此：

＆＃13;

function resetBg(){
    if(window.event.srcElement.id != 'noteditable'){
        document.getElementById('noteditable').style.backgroundColor = 'white';
    }
}

document.onclick = resetBg;

＆＃13;

<div contenteditable="true" style="width:100px; height:100px; border: 1px solid red;" onclick="this.style.backgroundColor='gray'" onblur="this.style.backgroundColor='white'"></div>

<div id="noteditable" style="width:100px; height:100px; border: 1px solid blue;" onclick="this.style.backgroundColor='gray'"></div>

＆＃13;

如何在div上模拟onblur事件

1 个答案: