Ereignis in überlagerten Elementen verhindern

Question

Ich habe einige Probleme mit diesem "Workflow".

Ich habe ein div, das ein Bild enthält, das als Banner verwendet wird, es deckt einen guten Teil des Bildschirms ab, in diesem div gibt es auch einige Eingaben, sie haben die Unschärfe- und Tastendruckereignisse angehängt, also immer wenn der Benutzer eingibt sie und klickt aus, sie tun etwas AJAX-Arbeit.

Jetzt ist das Problem, dieses div, das das ganze Element enthält, simuliert einen Klick auf eine Dateieingabe, um ein Bild auszuwählen, um das Banner zu aktualisieren. Da die Elemente innen sind, dann wenn ich jetzt auf die Eingaben klicke, simulieren sie auch den Klick auf die Eingabedatei.

Was kann ich in einem solchen Fall tun? Ich habe versucht, den Z-Index für die beteiligten Elemente zu setzen, aber das funktioniert nicht, weil das Hauptdiv, nichts zeigt und nichts feuert.

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>

Dies ist nur JS, nicht jQuery.

Answer 1

Sie event.stopPropagation() für die Eingabe verwenden können, und es wird das Bild nicht berühren:

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>