私はフルスクリーンの透明なキャンバスをWebページに表示しています。キャンバス上で、私はインタラクティブなオブジェクトをレンダリングします。問題があります。キャンバスの下の要素（リンクなど）がマウスのクリックに反応しません。clickイベントを下の要素に渡します
私が通常使用する明らかな解決策は、pointer-events: noneをキャンバスに適用することです。これにより、クリックが通過できるようになります。しかし、私は対話型オブジェクトをクリック可能にしたいので、これはこの状況では機能しません。
これは私がしたいことです：
キャンバスはマウスクリックイベントを保持する必要があります。イベントがインタラクティブオブジェクト上にない場合、イベントはページの反対側の要素に渡されます。
どうすればいいですか？
- これは
ソースのお役に立てば幸いです。
私はキャンバスにpointer-events: noneを使用しました。私は普通のようにcanvas.onclickとcanvas.onmousemoveを設定します。ただし、ポインタイベントは無効になるため、何も起こりません。
document.addEventListener('click', function() {
canvas.onclick();
});
window.onmousemove = function() {
canvas.onmousemove();
}
// etc.
これまでのところ、マウスイベントはウェブページとキャンバスの両方で受信されます。
私のインタラクティブなプログラムでは、マウスがインタラクティブオブジェクトの上をホバリングしている場合、trueを返す単純な小さな関数 "mouseOver"が含まれていました。私はこのようなwindow.onmousemoveを変更：
window.onmousemove = function() {
canvas.onmousemove();
if (mouseOver()) {
canvas.style["pointer-events"] = "auto";
} else {
canvas.style["pointer-events"] = "none";
}};
これは、Webページの干渉を受けることなくオブジェクトとの相互作用を、Webページに通過してできるからマウスイベントを防ぎます。
あなたの質問に対する答えは、バブリングとキャプチャにあると私は信じています。バブルは、クリックイベントが要素の親に渡され、キャプチャが反対の場合です。このリンクをチェックして、これらのプロセスがどのように動作するかを確認することをお勧めします。>http://javascript.info/tutorial/bubbling-and-capturing これをjQueryで実装する方法については100％確信していません。
それは親にまで送り返され、それが子どもたちに伝播される二つの段階を経るキャプチャされるすべてのイベント、
1）キャプチャ（） 2）バブリング（）
によってデフォルトでは、キャプチャは無効です。イベントを子に渡すaddEventListener（ "click"、function（）{blah blah blah}、true）を使用することができます。
子要素には、必要に応じてイベントを処理できます。
は、ここで私はこの場合http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_addeventlistener
<!DOCTYPE html>
<html>
<body>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<div id="myBtn">
<button id="myBtn2">Try it</button>
</div>
<p><strong>Note:</strong> The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.</p>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
if(true){
document.getElementById("demo").innerHTML = "Hello World";
event.stopPropagation();
}
}, true);
document.getElementById("myBtn2").addEventListener("click", function(){
document.getElementById("demo").innerHTML += "Hello World2";
});
</script>
</body>
</html>
を編集して作成したサンプルコードです、親のdivがイベントをキャプチャし、それに作用した場合、それが伝播を停止します。それ以外の場合は、それを耳にしている子供に送るだけです。私は誰に同じ質問を有する場合には、私は共有しなければならないと思った本当に素晴らしい解決策を見つけたhttp://javascript.info/tutorial/bubbling-and-capturing
お返事ありがとうございます。私はあなたが示唆したことをやってみましたが、クリックに反応しなかった他の要素（子供や親ではない）がありました。 私はかなりうまくいく別の解決策を見つけました： 'pointer-events：none'を使って、ウィンドウ自体にイベントリスナーを追加し、手動でキャンバス関数を呼び出してください。 –