如何在div内部的输入元素外单击onclick？

Question

这可能很简单，但当我单击textbox外警告javascript中的内容时，我什么也想不出来，但是当我单击文本内部时，div元素中没有任何happen.The输入文本。

因此，让我们假设我的html如下所示：

<div id="myone" onclick="javascript: myfunc();">
<input type="text" id="myInput"></input>
</div>

function myfunc()
{
alert('ok');
}

怎么改变呢？

非常感谢你！

Answer 1

你应该利用这个条件。e.target！我是==

比较event.target与此通常是有用的，以确定事件是否由于事件冒泡而被处理。当事件冒泡时，此属性在事件委托中非常有用。

在您的click函数中使用它，如下所示，并看到它的作用：

​

$('.divover').on('click', function(e) {
  if (e.target !== this) return;
  thefunc();
});


var thefunc = function myfunc() {
  alert('ok');
}

.divover {
  padding: 20px;
  background: yellow;
}
span {
  background: blue;
  color: white;
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='divover'>somelabel:
  <span><input type="text"  class="as" name="forename"></span>
</div>

​

Answer 2

这样做：

var div = document.getElementById('myone');
var funct = function(){
    var input = div.querySelector("#myInput");
    return false;
};

div.onclick = funct;

Answer 3

如果你仔细做这件事，这会成功的。

<div id="myone" onclick="javascript: myfunc();">
//your stuff in the clickable division.
</div>

<div style="position:absolute;">
<!--Adjust this division in such a way that, it comes inside your clickable division--><input     
type="text" id="myInput"></input>
</div>



//Your script function/code here
function myfunc()
{
alert('ok');
}