我正在尝试向输入字段添加javascript单击事件，如下所示。通过以下代码在所有字段上起作用：

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

我想要的是特定的输入字段。已尝试以下代码：

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

document.queryselector在桌面上运行良好。

<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>

我的目标是使用给定的输入将用户发送到不同的url。问题是您可以单击鼠标或单击enter来执行提交操作。
queryselector的兼容性看起来不错。