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 Web 应用程序时，由于 GridSelection.disableSelected 功能，它运行良好，但在Chrome和Mozilla Firefox中，该功能event.preventDefault();不起作用。即使用户已经将数据项添加到锚链接中，锚链接仍然会添加数据项。

在被阻止的函数preventDefault中包含该方法可以吗？GridSelection.addItem

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

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

Answer 1

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

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

如果这是GridSelection.verify()您试图阻止的，您应该注意：

1. 内联点击处理程序可能在其他事件处理程序之前被调用，这意味着从其他处理程序中取消它为时已晚，并且在任何情况下
2. e.preventDefault()不会阻止其他处理程序运行，它会停止事件的默认操作，该操作对于链接来说是导航到属性中指定的 url href。并且您没有指定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;