如何使js函数“ onClick”仅在容器div上起作用？

Question

我在onClick函数上遇到了问题。 我必须设定

display: none;

当用户单击时，在css容器div中单击，但在单击容器中的div时未单击。

<div id="msg_background" onclick="javascript:closemsg();">
    <div id="new_msg_cont">
    </div>
</div>

因此，我不希望单击“ new_msg_cont”该功能仍然有效。

这是js：

function closemsg() {
    document.getElementById('cont').style.height='';
    document.getElementById('cont').style.overflow='';
    document.getElementById('cont').style.position='';
    document.getElementById('msg_background').style.display='none';
}

提前致谢。

Answer 1

这称为“起泡”，其中内部元素事件“起泡”到父元素。

您可以使用event.stopPropagation()取消此操作：

内联脚本

<div onclick="event.stopPropagation();" id="new_msg_cont"></div>

jsFiddle

外部脚本

div onclick="javascript:cancel(event);" id="new_msg_cont"></div>

javascript：

function cancel(e)
{
    e.stopPropagation();
}

jsFiddle

Answer 2

试试这种方法：

<div id="msg_background" onclick="javascript:closemsg(this);">
  <div id="new_msg_cont">
     ... your code ...    
  </div>
</div>

JS代码

function closemsg(ele) {
  if(ele.id === 'msg_background'){
    document.getElementById('cont').style.height='';
    document.getElementById('cont').style.overflow='';
    document.getElementById('cont').style.position='';
    document.getElementById('msg_background').style.display='none';
  }  
}

Answer 3

尝试这样的事情

javascript

function closemsg(event) {
    if(event.target.id == "msg_background" ){
        alert('you cliked me');
        document.getElementById('cont').style.height='';
        document.getElementById('cont').style.overflow='';
        document.getElementById('cont').style.position='';
        document.getElementById('msg_background').style.display='none';
    }
}

html

<div id="msg_background" onclick="closemsg(event);">
    div1
    <div id="new_msg_cont">
        div2
    </div>
</div>

Answer 4

在函数内部检查事件是否由您的父div触发：

if (ev.target.id == "msg_background")
{
  //execute the contents of the closemsg function
}

（ev是事件参数）

工作演示： http : //jsfiddle.net/kVuKA/1/