javascript - PreventDefault() 不适用于特定选项选择

Question

我有这个<select>列表采用不同的选项并根据单击的选项重新路由。 html代码为:

      <select id="pageSelect" name="Choose Page" onchange="location = this.value">
        <option value='' disabled selected hidden>Choose Page</option>
        <option value='/page-1'>Page 1</option>
        <option value='/page-2'>Page 2</option>
        <option value="allPages" >Custom Page</option>
      </select>

前 2 页的重新路由按预期工作。但是，第三个选项将使用自定义 Javascript 函数来处理，而不是由 <select> 中声明的 onchange 函数处理。元素。

最后一个<option>的自定义函数是:

   $('#pageSelect').change(function(event) { 
      event.preventDefault()
        var pagesvalueselect = $(this).val(); 
        if(pagesvalueselect=="allPages"){ 
            $('#siteSaleModal').modal("show"); //Open Modal
        }
    });

该功能有效，当用户单击最后一个选项时，它会触发弹出模式，但它仍然将用户重定向到基于 value="allPages" 的另一个页面。即使我正在使用 preventDefault()功能。

Answer 1

preventDefault() 调用仅停止当前 change 事件处理程序。您通过 onchange 属性分配的那个仍然会运行，因为它是完全独立的。

要解决此问题并改进代码，请删除 onchange 属性(因为它们已经过时，现在被认为是不好的做法)，并将它们合并到一个不显眼的事件处理程序中。

$('#pageSelect').change(function(event) {
  event.preventDefault()
  var pagesvalueselect = $(this).val();
  if (pagesvalueselect == "allPages") {
    console.log('open modal...');
    //$('#siteSaleModal').modal("show"); //Open Modal
  } else {
    console.log('redirecting to ' + pagesvalueselect + '...');
    //window.location.assign(pagesvalueselect);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pageSelect" name="Choose Page">
  <option value="" disabled="true" selected="true" hidden>Choose Page</option>
  <option value="/page-1">Page 1</option>
  <option value="/page-2">Page 2</option>
  <option value="allPages">Custom Page</option>
</select>