防止在javascript中触发父级的同级事件

Question

<input id="test" type="text" list="list">
<datalist id="list">
    <option value="A">First option</option>
    <option value="B">Second option</option>
</datalist>

$("input").keyup(function(event) {
    //any event like this for example...
    console.log(event.target.value);
});

I don't want this event to trigger after the user clicked on an option. Already tried the followings even though it was unlikely to work (javascript) :

$("option").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});

Also why does the event trigger since I used a keyup event and not an input ? ...

Answer 1

Do with Keypress .

UPDATED

you need to call the value from the event inside not a onload

 $("input").keypress(function(event) { //any event like this for example... console.log("Hello from the other side"); }); $('#test').change(function(){ // you need to call the value from the event inside not a onload console.log(document.getElementById("test").value) //no need console.log($(this).val()) // jquery alredy present so simple use that }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="test" type="text" list="list"> <datalist id="list"> <option value="A">First option</option> <option value="B">Second option</option> </datalist>