Disable parent click but keep child click event active

Question

I want my button in code below to have click event but not parent 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>

I tried using css pointer events but if parent has it then child button is not working.

score 1 · Answer 1 · answered Jun 20 '17 at 10:06

add onclick event handler like this: <button id="myButton" onclick="function(e) {e.stopPropagation();}">Play Video</button>

event.stopPropagation stops the click event propagation to parent elements. Learn more here: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

score 0 · Answer 2 · answered Jun 20 '17 at 10:07

I believe this is what you're looking for:

<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>

score 0 · Accepted Answer · answered Jun 20 '17 at 10:13

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>

This will help you
Happy Coding....

score 0 · Answer 4 · answered Jun 20 '17 at 10:13

You've at least two options. The first is to check whether the event was fired by the button or the div. Or to prevents the event from bubbling up the DOM tree. In jQuery you can do that by calling the method "stopPropagation()".

Here the answer to a similar question.

Disable parent click but keep child click event active

4 Answers4