Question

已经有一个小时了，因为我无法找到我的错误。而且，我确信这是一个愚蠢的。无论如何，这是我的javascript代码：

var deleteRefsButton = document.getElementsByClassName('refs--item--delete');

var deleteRefs = function(e, i){
    e.preventDefault();
    e.parentNode.classList.add('deleted');
    document.getElementById('deletedInput'.i).value = true;
}

for (var i=0;i<deleteRefsButton.length;i++){
    var button = deleteRefsButton[i];
    button.addEventListener('click', deleteRefs(button,i), false);
}

这是我的HTML方案：

<div class="refs--item" id="refs1">
    <div class="refs--item--text">
        content
    </div>
    <input type="hidden" name="deleted1" value="false">
    <a class="refs--item--delete" href="#">Delete this refs</a>
</div>
<div class="refs--item" id="refs2">
    <div class="refs--item--text">
        content
    </div>
    <input type="hidden" name="deleted2" value="false">
    <a class="refs--item--delete" href="#">Delete this refs</a>
</div>
...

所以，正如你所看到的，我的目标是在链接上监听click事件（a.refs - item - delete），阻止顶部滚动，然后在其parentNode中添加一个“已删除”类，最后添加值为真正的隐藏输入。

但是使用现有代码，没有任何效果，控制台说：

 Uncaught TypeError: e.preventDefault is not a function

所以也许你看到了我的错误。

提前谢谢

Answer 1

有一些错误与javascript的基本原理有关。

使用addEventListener时，你传递了你想要触发的功能的实例，你就不会执行它。

button.addEventListener('click', deleteRefs, false);

然后，当触发器被触发时，事件将作为第一个参数传入。这将解决preventDefault未定义的问题。

其次，您尝试getElementById('deletedInput'.i)尝试在字符串上调用i。这不是有效的JavaScript。你要做的是：

getElementById('deletedInput' + i);

但是i将是未定义的，因为您无法像在addEventListener中那样执行该函数。

我还要注意，执行此document.getElementById('deletedInput'.i)将无效，因为您没有带有前缀为deletedInput的ID的元素。您可以使用querySelector解决此问题。我已将此添加到我的示例中。

最后我要注意你的for循环从0开始。你没有0的元素。当你的处理程序通过i时，你需要向i添加1。

我编辑了你的代码，你可以做这样的事情。如果您有任何疑问，可以参考developer.mozilla.org。你可以复制并粘贴它，它会起作用。

var deleteRefsButton = document.getElementsByClassName('refs--item--delete');
var deleteRefs = function(){

    // The arguments object is an Array-like object corresponding to the arguments passed to a function.
    var i = arguments[0];
    var e = arguments[1];
    e.preventDefault();
    e.currentTarget.parentNode.classList.add('deleted');
    document.querySelector('[name="deleted' + i + '"]').value = true;
}

for (var i=0; i < deleteRefsButton.length; i++){

    var button = deleteRefsButton[i];

    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
    // .bind will prepend i the the list of arguments passed to deleteRefs
    button.addEventListener('click', deleteRefs.bind(this, i + 1), false);
}

Javascript bug“e.preventDefault（）;”不是一个功能

1 个答案: