Question

我在PHP中使用jquery ajax创建了一个结帐系统作为学校项目，并且我在javascript中从event.target返回的值有一个奇怪的问题。这是HTML和JS。

HTML：

<td>
    <button class='checkout-remove-btn' value='102' onclick='removeProduct(event)'>
        <span class='table-remove glyphicon glyphicon-remove'></span>
    </button>
</td>

JS :(用于调试将替换为ajax post）

function removeProduct(event) {
    alert(event.target.value + " " + event.target.parentElement.value);
}

问题是Firefox和Chrome / IE的回报不同。

Firefox:
target.value = 102
target.parentElement.value = undefined

Chrome:
target.value = undefined
target.parentElement.value = 102

我不知道为什么他们的处理方式不同，有没有办法正确获得价值102？

Answer 1

处理事件值的jQuery方法是什么？

您可以使用on()或click()附加事件处理程序，然后使用this关键字引用点击的元素，如下所示：

＆＃13;

$('.checkout-remove-btn').click(function() {
    console.log(this.value);
})

＆＃13;

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="checkout-remove-btn" value="102">
  <span class="table-remove glyphicon glyphicon-remove"></span>
</button>

＆＃13;

以这种方式附加事件消除了引发事件的元素的含糊不清，因为this将始终引用选择器中的元素。

Answer 2

这可能不是浏览器问题，但更有可能是您点击按钮的结果。

如果单击span，event.target将是span元素，因为click事件会使DOM冒泡。如果您点击button，但在span之外，则event.target将成为具有值的按钮。

有很多方法可以计算出哪个元素被点击，这个元素依赖于元素的类：

function removeProduct(event) {
    if(event.target.classList.contains('glyphicon') {
        alert(event.target.parentElement.value);
    } else {
        alert(event.target.value);
    }
}

Javascript event.target.value在firefox中返回的值与Chorme / IE中的值不同

2 个答案: