3

扱っているオブジェクトの後ろにオブジェクトがあり、この最初の要素をクリックしたくないので、その下の要素をクリックします。

ラファエルの要素がイベントの受信を停止し、それでも表示されたままにすることは可能ですか？

4

2 に答える 2

2

イベントがバブリングするため、その背後にあるオブジェクトは引き続きクリック イベントを受け取ります。前のオブジェクトのイベントを無視してください。ただし、「前」のオブジェクトが「後ろ」のオブジェクトの子でない場合は機能しません。これは、Rapahel のように要素を絶対配置した場合です。あなたの唯一の解決策は、 http://robertnyman.com/css3/pointer-events/pointer-events.htmlを使用することです

pointer-events: none;

ただし、それは最新のFFとChromeでのみ機能します

または、ランディ・ホールが提案したようなハックを使用して、クリックされた要素を非表示にし、elementFromPoint()

于 2012-12-07T17:41:32.073 に答える
1

私はこれに対する解決策を持っています。似たようなものを構築しました。必要なのは、表示されているオブジェクトの背後にあるオブジェクトでイベントをトリガーすることです。基本的に、キャンバスの背後にあるドームでイベントをトリガーする必要がありますか? クロスブラウザの詳細を理解する必要がありますが、これで開始できます

element.onclick = function (e){ //or however you're binding it
    // create some function so that canvas.style = display none, so that it's not in the way
    // then get the element at the click coordinates
    var ghost = document.elementFromPoint(e.pageX, e.pageY);
    //create an event
    var evt = document.createEvent('Event');
    evt.initEvent(e.type, true, true);
    //set x and y on evt to match the x and y that was used in the original click
    evt.pageX = e.pageX;
    evt.pageY = e.pageY;
    //do the event on the element
    ghost.dispatchEvent(evt);
    // create some function to reshow the canvas. 
}

または、キャンバス上で特定の要素の背後にあるものをクリックしようとしている場合は、特定の要素を非表示にすることもできます。または、イベントが発生した後に必要がなくなった場合は、キャンバスを非表示にする代わりに完全に破棄することもできます。

于 2012-12-07T17:49:08.307 に答える