左または右クリックでどの要素が選択されますか？

Question

私はテンプレートで作成されているいくつかのフォルダアイコンを持っている：私は、来るe.targetを最もフォルダをクリックし、左場合

：

<div id='folderTemplate' class="template openclosed_folder_icon subfolder" style="position:absolute; top:'30'; left:'100';"> 
     <img class="folder_icon" src="images/folder_closed.png" alt="closed folder" /> 
     <div class="folder_label" >name</div> 
     <img class='folder_redX' src='images/redX.png' alt='redX' title='Delete this gallery' /> 
</div> 

フォルダは、次のようになりjQueryの最初の<img>要素は、上記のオープニング<div>タグのすぐ下にあります。また、Chromeデバッグを有効にしてこれらのフォルダを右クリックすると、その要素を確認するために、最初に<img>要素が選択されます。しかし、フォルダの1つが私にアウター<div>を与えました。それをクリックするか右クリックしたときです。誰が何が起こっているのか考えているのですか？どの要素が左クリックか右クリックによって実際に選択されるかを制御するものは何ですか？私の最高の推測では次のようになり

Answer 1

、<img />要素が選択不可能なスタイルを持っているかもしれません

ありがとう：

pointer-events: none; 

上記のコードは、マウスポインタがまったくその画像を見ていないことを確認します、またはその理由のための要素。ここ

チェックこのアウト：上記のスニペットで

input {padding: 25px 35px;} 
 
div {pointer-events: none; position: relative; top: 15px; background: #fff; display: inline-block; left: -205px; z-index: 9999;}

<input type="button" value="Hello, World! Click Me?" /> 
 
<div>See through! Click on me!</div>

、あなたが<div />をクリックしようとすると、あなたが行うことはできません、とポインタイベントが直接行きますその背後の要素に論理的には、マウスには<div />がまったく表示されません。理由の大部分は、あなたが提供していないCSSの背後にあるCSSがこの質問に答えるかもしれないからです！ :)

確かに、を<div />に追加しました。まだ<div />は選択できません。

Answer 2

私はこれを解決しましたが、私が考えたものではありませんでした。

私はimagesフォルダをクリックしていたと思ったときに、私は実際にクリックした問題は、左にフォルダのテンプレートのdivが離れすぎて右に延び、右側のフォルダと重なるということでしたGalleryフォルダのテンプレートdivは、マウスクリックが画像フォルダに到達するのをブロックしました。クリックすると、画像フォルダのテンプレートdivが表示されませんでした。 ImageフォルダをオーバーレイしたGalleryフォルダのテンプレートdivを表示していました。フォルダの重複がなくなるように、フォルダ名を保持するだけのテンプレートdivの幅を作成するように修正しました。