javascript - document.querySelector not working on mobile

Question

I am trying to add a javascript click event to an input field as shown below. What works is on all fields via the code below:

this.addEventListener('touchend', function(e){
    alert("hallo");
}); 

What I want is on the specific input field. Have tried the following code:

document.querySelector(".search-form").addEventListener('touchend', function(e){
    alert("hallo");
}); 

The document.querySelector works fine on desktop though.

<div class="nv-nav-search" aria-label="search">
  <div class="form-wrap ">
    <form role="search" method="get" class="search-form" action="https://www.k.nl/"><label><span class="screen-reader-text">Zoek naar...</span><input type="search" class="search-field" placeholder="Zoek naar..." value="" name="s"></label><input type="submit" class="search-submit" value="Search">
      <div class="nv-search-icon-wrap">
        <div class="nv-icon nv-search">
          <svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"></path></svg>
        </div>
      </div>
    </form>
  </div>
</div>

My aim is to send the user to a different url with the input which is given. The problem is one can mouse click or can click enter to perform the submit action.

The compatability of the queryselector looks okay.

标签： javascriptmobilesafari