Question

我的链接看起来像这样：

<a id="mylink" onclick="deleteHike( 3 );" href="javascript:void(0);">Yes</a>

可以调用此JavaScript：

window.onload = function()
{

  //Get a reference to the link on the page
  // with an id of "mylink"
  var a = document.getElementById("mylink");

  //Set code to run when the link is clicked
  // by assigning a function to "onclick"
  a.onclick = function( hike_id )
  {
     // Somecode her
     // But when I try to use the hike_id it displays as [object MouseEvent] 
  }
}

但是进来的值是[object MouseEvent]，而不是我期待的数字。知道为什么会这样，以及如何解决这个问题？：）

谢谢！

Answer 1

您正尝试以两种不同且相互冲突的方式将功能分配给您的链接。

使用eval-ed函数字符串onclick = "function(value)"，可以使用但不推荐使用。

在onload事件中绑定单击处理程序的另一种方式也可以，但是如果要传递特定值，则必须稍微更改脚本，因为在将onclick设置为新函数时，初始onclick完全丢失。

要使当前方法有效，您根本不需要onload处理程序。你只需要这个：

function deleteHike(hike_id) {
   // Some code here
}

要做到第二种方式，我建议，它看起来像这样：

<a id="mylink" href="javascript:void(0);">Yes</a>

使用此脚本：

function deleteHike(e, hike_id) {
   // Some code here
   // e refers to the event object which you can do nifty things with like
   //  - learn the actual clicked element if it was a parent or child of the `this` element
   //  - stop the event from bubbling up to parent items
   //  - stop the event from being captured by child items
   //   (I may have these last two switched)
}

function getCall(fn, param) {
   return function(e) {
      e = e || window.event;
      e.preventDefault(); // this might let you use real URLs instead of void(0)
      fn(e, param);
   };
}

window.onload = function() {
   var a = document.getElementById("mylink");
   a.onclick = getCall(deleteHike, 3);
};

DOM事件函数的参数是事件对象（在Firefox和其他符合标准的浏览器中）。 IE中没什么（因此也需要抓住window.event）。我为你添加了一个小辅助函数，它会在你的参数值周围创建一个闭包。你可以每次都这样做，但这会很痛苦。重要的是getCall是返回函数的函数，当你点击元素时会调用这个返回的函数。

最后，我强烈建议您使用jQuery之类的库，而不是所有这些，因为它可以为您解决各种问题，而且您不必知道需要很多专业知识的疯狂JavaScript恰到好处，问题如：

为单个事件设置多个处理程序
在使用模拟事件onload触发ready事件之前，请尽快运行JavaScript。例如，可能图像仍在下载，但您希望在用户尝试使用该页面之前将焦点放在控件上，您不能使用onload执行此操作并且它实际上是解决跨浏览器的难题。
处理事件对象的传递方式
找出浏览器处理事件传播和获取点击项目等所有不同方式。

注意：在您的点击处理程序中，您只需使用将包含已点击元素的this事件。这对您来说可能非常强大，因为您不必为每个元素的onclick事件编码它在JavaScript中的哪个项目，您只需将相同的处理程序绑定到所有项目并从元素中获取其值。这样做更好，因为它允许您仅在元素中编码有关元素的信息，而不是在元素和 JavaScript中编码。

Answer 2

javascript事件中的第一个参数是事件本身。如果您需要引用回“a”标记，则可以使用此变量，因为范围现在是“a”标记。

Answer 3

你应该能够像这样声明这个函数（不需要在window.onload上分配）：

function deleteHike(hike_id)
{
     // Somecode her
     // But when I try to use the hike_id it displays as [object MouseEvent] 
}

Answer 4

这是我最喜欢的解决这个问题的方法。我喜欢这种方法，因为它的清晰和简洁。

使用此HTML：

<a onclick="deleteHike(event);" hike_id=1>Yes 1</a><br/>
<a onclick="deleteHike(event);" hike_id=2>Yes 2</a><br/>
<a onclick="deleteHike(event);" hike_id=3>Yes 3</a><br/>

使用此JavaScript：

function deleteHike(event) {
    var element = event.target;
    var hike_id = element.getAttribute("hike_id");
    // do what you will with hike_id
    if (confirm("Delete hike " + hike_id + "?")) {
        // do the delete
        console.log("item " + hike_id + " deleted");
    } else {
        // don't do the delete
        console.log("user canceled");
    }
    return;
}

此代码有效，因为在调用onclick处理程序时，JavaScript环境中定义了event。

有关更完整的讨论（包括您可能希望使用“data-hike_id”而不是“hike_id”作为元素属性的原因），请参阅：How to store arbitrary data for some HTML tags。

这些是HTML的替代形式，具有相同的效果：

<a onclick="deleteHike(event);" hike_id=4 href="javascript:void(0);">Yes 4</a><br/>
<button onclick="deleteHike(event);" hike_id=5>Yes 5</button><br/>
<span onclick="deleteHike(event);" hike_id=6>Yes 6</span><br/>

Answer 5

当您为像这样的DOM元素上的事件分配函数时，浏览器将自动传递事件对象（在本例中为MouseEvent，因为它是onclick事件）作为第一个参数。

尝试这样，

a.onclick = function(e, hike_id) { }

从链接onclick传递参数到JS函数

5 个答案: