chrome vs firefox中的点击事件给出了不同的目标？答案

【问题标题】：Click event in chrome vs firefox gives different targets?chrome vs firefox中的点击事件给出了不同的目标？
【发布时间】：2018-02-01 21:47:53
【问题描述】：

TL;DR：

如果您在 Firefox 和 Chrome 中，单击此按钮会在单击事件上提供不同的目标。似乎应该有一个优雅的解决方案来解决这个问题，而不必检查元素的父元素以查看它是否是按钮。

类似问题：

event.target.parentNode… pointing to different parents in chrome and firefox?

详情

JS：

    let guid = '05c4d5b0-44c6-4e4f-a4dd-b5ac9029b3a9';
    //Get the div with this GUID.
    let elem = document.getElementById(guid);

    //Get the button that belongs to this div that has the 'delete-device' class.
    let b = elem.getElementsByClassName("delete-device")[0];

    //Add listener to delete the div when clicked.
    b.addEventListener("click", delete_devices, false);

HTML：

<button data-id="05c4d5b0-44c6-4e4f-a4dd-b5ac9029b3a9" class="btn-floating btn-small waves-effect waves-light red delete-device ">
      <i class="material-icons">delete</i>
</button>

在 Firefox 中，e.target 是按钮。

在 Chrome 中，e.target 是 <i> 元素。

所以，当我们执行回调时（如下）Chrome 找不到我们需要的 div，并将变量设置为 null，这（当然）会抛出错误。

function delete_devices(e){
    e.preventDefault();
    let id = e.target.getAttribute('data-id');
    let elem = document.getElementById(id);
    elem.remove();
    return true;
}

【问题讨论】：

你不需要e.target，改用this。
你能用span代替i吗？ spans 没有同样的问题。
另外，您引用了包含 GUID 的 id，但您根本没有显示带有 id 的元素。你用过data-id。

标签： javascript

【解决方案1】：

使用this 来指代被点击的元素，如果您使用的是按钮，请确保在按钮和其中的某些元素上真正添加事件。

const guid = '05c4d5b0-44c6-4e4f-a4dd-b5ac9029b3a9';
//Get the div with this GUID.
const elem = document.getElementById(guid);
const button = elem.querySelector("button.delete-device");
//Add listener to delete the div when clicked.
button.addEventListener("click", delete_devices, false);
    
function delete_devices(e){
    let id = this.getAttribute('data-id');
    console.log("Deleting widget: ", id)
    const elem = document.getElementById(id);
    elem.remove();
    return true;
}

<div id="05c4d5b0-44c6-4e4f-a4dd-b5ac9029b3a9">Device widget
<button data-id="05c4d5b0-44c6-4e4f-a4dd-b5ac9029b3a9" type="button" class="btn-floating btn-small waves-effect waves-light red delete-device ">
      <i class="material-icons">delete</i>
</button>
</div>

请注意，我删除了 event.preventDefault。我想您使用它是因为您想阻止提交表单。默认情况下，任何<button> 都会提交，要将其变为普通按钮，请执行以下操作：

<button type="button">This does not submit form</button>

【讨论】：

【解决方案2】：

您无需引用e.target。在 DOM 事件处理程序中，this 指的是触发事件的元素。如果在按钮（父元素）上设置了事件处理函数，那么子元素不能成为事件的触发器。

此外，您的代码尝试获取元素的id，但您的所有元素都没有为它建立id。您使用了data-id，如果需要，可以通过element.dataset.attributeName 语法访问。

//Get the div with this GUID.
const guid = '05c4d5b0-44c6-4e4f-a4dd-b5ac9029b3a9';
const b = document.querySelector("[data-id='" + guid + "']");

// Add listener to delete the button when clicked.
b.addEventListener("click", delete_devices);

function delete_devices(e){
    this.remove();
}

<button data-id="05c4d5b0-44c6-4e4f-a4dd-b5ac9029b3a9" 
        class="btn-floating btn-small waves-effect waves-light red delete-device ">
   <i class="material-icons" id="05c4d5b0-44c6-4e4f-a4dd-b5ac9029b3a9">delete</i>
</button>

【讨论】：