javascript - 透明な画像をクリックする

Question

透明な背景に車を描いた正方形の画像があります。車をクリックできるようにしたいのですが、透明な背景をクリックすると、クリックして画像を確認し、基になるDOM要素（具体的には他の画像）をトリガーします。

それはどういうわけか達成できますか？

Answer 1

これは非常に複雑ですが、ポインタイベントを組み合わせclickてDOMをバブルアップ（img親コンテナに到達）できるようにし、上部にある偽のキャンバスを組み合わせて透明なピクセルを検出することで実現できます（これはフラグとして使用され、イベントの委任）。

ポインターイベントはSVGモデルから派生し、レイヤー間でのイベントの委任を可能にしました。現在、IEとOperaではサポートされていないことに注意してください。

関連記事：

• ピクセルカラー検出に使用される手法
• HTML5キャンバスからピクセルを取得

デモ：

• pointer-eventsjsFiddleで

参照：

• pointer-eventsMozillaDeveloperNetworkで
• Dev.Operaでのピクセルベースの操作

さらに読む：

• ロバート・ナイマンによる主題に関する記事
• 画像データの変換に関するジョン・レシグ

Answer 2

車の周りにnanSVGシェイプを描画し、その中に画像を配置してから、シェイプのクリックイベントをリッスンすることができます。

Answer 3

いいえ、画像のクリックイベントは画像の透明度によって制御されません。クリックは常に画像上でトリガーされ、停止していない場合は親にバブルアップします。

画像には半透明のピクセルを含めることができます。たとえば、ピクセルの不透明度が61％の場合、クリックの37％が親要素に移動しますが、これはもちろん不可能です。