Question

我希望下面代码中的按钮具有click事件，但不是父div。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<div id="myVideo">
    <video controls="" autoplay="" name="media">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>
    <button id="myButton">Play Video</button>
</div>


</body>
</html>

我尝试使用css指针事件，但如果父有它，则子按钮不起作用。

Answer 1

像这样添加onclick事件处理程序： <button id="myButton" onclick="function(e) {e.stopPropagation();}">Play Video</button>

event.stopPropagation停止将click事件传播到父元素。点击此处了解详情：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Answer 2

我相信这就是你要找的东西：

<div id="myVideo">
  <video name="media" id="video">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  </video>
</div>

<button id="myButton" onclick="document.getElementById('video').play()">Play Video</button>

Answer 3

var myVideo = document.getElementById("myVideo"); 

function playPause()
{ 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<div id="mydIV">
    <video ID="myVideo" controls="" autoplay="" name="media">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>
    <button onclick="playPause()">Play/Pause</button> 
</div>


</body>
</html>

这将有助于你快乐的编码......

Answer 4

您至少有两种选择。第一个是检查按钮或div是否触发了事件。或者防止事件冒泡DOM树。在jQuery中，您可以通过调用方法＆＃34; stopPropagation（）＆＃34;来实现这一点。

此处answer为question。

禁用父单击但保持子单击事件处于活动状态

4 个答案: