親クリックは無効にしますが、子クリックイベントをアクティブに保ちます。

下のコードで私のボタンにクリックイベントがありますが、親divはありません。親クリックは無効にしますが、子クリックイベントをアクティブに保ちます。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <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のポインタイベントを使用してみましたが、親はそれを持っている場合、子ボタンが機能していません。

出典

2017-06-20 Gangleader

var myVideo = document.getElementById("myVideo"); 
 

 
function playPause() 
 
{ 
 
    if (myVideo.paused) 
 
     myVideo.play(); 
 
    else 
 
     myVideo.pause(); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <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>

これはコーディング
幸せのお手伝いをします....

出典

2017-06-20 10:13:40

は次のようにonclickのイベントハンドラを追加します。 <button id="myButton" onclick="function(e) {e.stopPropagation();}">Play Video</button>

するevent.stopPropagationは親要素へのクリックイベントの伝播を停止します。ここでは詳細をご覧ください：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

出典

2017-06-20 10:06:55 netchkin

私は、これはあなたが探しているものであると信じて：

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

出典

2017-06-20 10:07:52 Okx

少なくとも2つのオプションがあります。最初に、ボタンまたはdivによってイベントが発生したかどうかを確認します。または、イベントがDOMツリーをバブリングしないようにする。 jQueryでは、メソッド "stopPropagation（）"を呼び出すことでこれを行うことができます。

ここで、answerと同様のquestionとなります。

出典

2017-06-20 10:13:45 Elmehdi93

親クリックは無効にしますが、子クリックイベントをアクティブに保ちます。

答えて

関連する問題