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 中， event.preventDefault(); 不起作用。锚链接仍然添加数据项，即使用户已经将其添加到那里。

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

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

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

原文由 ideAvi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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() 方法， 如果你想阻止其余的运行。

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

 <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() 函数，并且您打算防止 未来的 点击事件在同一链接上工作，因为第一次点击应该验证/添加和那么你不想再次添加，然后在你的 .addItem() 函数中做这样的事情：

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

原文由 nnnnnn 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您是否尝试添加 return false; 而不是 event.preventDefault();

原文由 Hamdi 发布，翻译遵循 CC BY-SA 3.0 许可协议