Div onclick 函数未按预期运行

Question

我正在尝试运行一个只要点击网页上的任何地方就会激活的功能。

为了实现这一点，我创建了一个填满整个网页的 div 并设置了一个 onclick 命令，但是单击 div 时没有任何响应。

当我在按钮上的 'onclick' 中使用完全相同的功能时，我做错了什么？

<div id='target' onclick="getStatus()"> <button onclick="getStatus()">Start</button>

提前致谢。

Answer 1

<button onclick="getStatus()"">

指的是一个 getStatus 函数，它应该存在于您页面上某处的脚本标记内。

例如

<script>
$( document ).ready(function() {
    func getStatus(){
//your code in here
}

});

</script>

Answer 2

原因是空 div 不占用任何 space 尝试摆弄你的 css 并添加

div{
    display: block;
    height: 1280px;
    width: 100%;
    display: inline-block;
    float: left;
    margin: 0;
    text-align: center;
 }

希望这就是您想要的。没有风格： https://jsfiddle.net/L702aaha/ 搭配风格： https://jsfiddle.net/v58urpe3/1/

Answer 3

你可以使用vanilla javascript来实现点击的效果。这是一个 fiddle http://jsfiddle.net/hjamal/16geab29/

传递的鼠标事件有一个 srcElement 属性因此您可以控制在用户按下内部元素或外部元素时是否做出反应。

您也可以使用 document.addEventListener('click', callback) 代替制作 div 来包装整个文档以侦听整个文档中的点击，并使用与上述相同的技巧使其表现不同文档中的每个元素。

如果您在此页面上调出您的开发人员控制台作为示例并将此代码复制到其中，您应该会得到与您想要的类似的行为。

document.addEventListener('click', function(event){
  var source =  event.srcElement || event.target;  
  console.log(source)
})

请注意 srcElement 在任何地方都没有标准化。旧版本的 IE 也使用 target 代替。要了解更多信息，请查看以下内容：

Div onclick function not running as expected