javascript - event.preventDefault() 不工作

Question

我在使用 Telerik Grid 时看到了这行代码:

      columns.Bound(o => o.URI).Width(10).Sortable(false)
                .ClientTemplate("<A class='btnGrid' id=source<#= ID #> onclick=GridSelection.addItem('<#= ID #>') >Add</A>").Title("").Width(50);

GridSelection addItem 和 disableSelected 函数的 JS 代码:

  GridSelection = {
      addItem: function (value) {

         var anchorOption = $("a[id=source" + value + "]");

         anchorOption.click(function (e) { // variable name changed from "event"
               e.preventDefault();
               return false;    // as suggested by mr. Hamdi
               });

         anchorOption.fadeTo("slow", .5);

         GridSelection.disableSelected(anchorOption, true);

         var data = $("#GridSource").data('tGrid').data;
         var selectedObject;
         for (var item in data) {
            if (data[item].ID == value) {
               selectedObject = data[item];
               break;
            }
         }

          var grid = $("#GridSelected").data('tGrid');
          var newData = $("#GridSelected").data('tGrid').dataSource._data;
          newData.push(selectedObject);
          grid.dataBind(newData);
          grid.sort("");
          anchorOption.fadeTo("slow", .5);
      },

      disableSelected: function (element, disable) {
              //false on IEs 6, 7 and 8
              if (!$.support.leadingWhitespace) {
                  if (disable) {
                      $(element).attr('disabled', 'disabled');
                  } else {
                      $(element).removeAttr('disabled');
                  }
              }
     },
         // other GridSelection subfunctions here...

当我在 IE 中运行 MVC3 网络应用程序时，由于 GridSelection.disableSelected 函数，它运行良好，但在 Chrome 和 Mozilla Firefox 中， 事件.preventDefault(); 不起作用。 anchor 链接仍然会添加数据项，即使用户已经将其添加到那里也是如此。

在被阻止的 GridSelection.addItem 函数中使用 preventDefault 方法是否可以？

preventDefault 阻止了哪个属性，是 href 还是 onclick？

这有什么问题吗？ 我该如何修复这个错误？ 谁能帮忙？

Answer 1

您的链接标记有一个内联点击处理程序，但没有 href:

<A class='btnGrid' id=source<#= ID #> onclick=GridSelection.verify('<#= ID #>') >Add</A>

如果您要阻止的是 GridSelection.verify()，您应该注意:

1. 内联点击处理程序可能在您的其他事件处理程序之前被调用，这意味着从您的其他处理程序取消它为时已晚，无论如何
2. e.preventDefault() 不会阻止其他处理程序运行，它会停止事件的默认操作，该事件的链接是导航到 href< 中指定的 url/ 属性。而且您没有指定 href。

如果你想为同一个元素上的同一个事件设置多个处理程序，你应该用 jQuery 按照你希望它们被调用的顺序分配它们，然后使用 event.stopImmediatePropagation() method如果您想停止其余处理程序的运行，请在其中一个处理程序中。

鉴于您没有显示要阻止的部分代码，我不知道如何将其放入您显示的代码中，但一般原则是:

<a id="myLink" href="someURL">My link</a>

<script>
$("#myLink").click(function(e) {
    // some processing
    if (someCondition)
       e.stopImmediatePropagation();
    // some other processing
});

$("#myLink").click(function(e) {
    // some processing
});
</script>

话虽如此，如果 .verify() 函数调用了您的 .addItem() 函数，并且您打算阻止 future 在同一个链接上点击事件，因为第一次点击应该验证/添加，然后你不希望能够再次添加，然后在你的 .addItem() 函数中做这样的事情:

anchorOption.removeAttr("onclick");
// or
anchorOption[0].onclick = null;