オーバーポジション要素のイベントを防止します

Question

私はこの「ワークフロー」にいくつか問題があります。

私は、画像がバナーとして使用されているdivを持っています。これは画面のかなりの部分をカバーしています。このdivにはいくつかの入力があり、ユーザはblurやkeypressイベントを添付しています。それらをクリックして、AJAXの仕事をいくつか行います。

ここで問題となるのは、すべての要素がファイル入力をクリックして、バナーを更新するイメージを選択するのをシミュレートするこのdivです。要素が内部にあるので、入力をクリックすると、入力ファイルのクリックもシミュレートされます。

この場合、私は何ができますか？私は、関連する要素のZ-インデックスを設定しようとしましたが、メインのdivが何も表示せず、何も起動しないため、動作しません。

let input = document.querySelector('input[name="name"]') 
 
input.onclick = function() { 
 
    alert('input pressed') 
 
} 
 
let div = document.querySelector('.main') 
 
div.onclick = function() { 
 
    alert('div pressed') 
 
}

.main { 
 
    background-image: url('https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg'); 
 
    width: 640px; 
 
    height: 480px; 
 
} 
 

 
input[name="name"] { 
 
    color: white; 
 
    background: transparent; 
 
}

<div class="main"> 
 
    <input type="text" name="name" value="Type here pls"> 
 
</div>

これが唯一のJS、jQueryのではないです。

Answer 1

あなたが入力をevent.stopPropagation()を使用することができ、そしてそれはイメージ触れないだろう：クリックした場合、入力に

let input = document.querySelector('input[name="name"]') 
 
input.onclick = function(e) { 
 
    e.stopPropagation(); 
 
    alert('input pressed') 
 
} 
 
let div = document.querySelector('.main') 
 
div.onclick = function() { 
 
    alert('div pressed') 
 
}

.main { 
 
    background-image: url('https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg'); 
 
    width: 640px; 
 
    height: 480px; 
 
} 
 

 
input[name="name"] { 
 
    color: white; 
 
    background: transparent; 
 
}

<div class="main"> 
 
    <input type="text" name="name" value="Type here pls"> 
 
</div>