Question

我目前正从Google地方获取数据，并动态创建div以显示结果。我正在尝试将鼠标悬停事件添加到每个div，但实际上没有运气。我检查了html源代码，它似乎没有为任何创建的DIV添加事件。

JS：

{{1}}

Answer 1

我想你需要像这样包装onmouseover函数：

div.onmouseover = function() {
    PanToMarker(relatedProperties[i].formatted_address);
};

这是因为当您单击该元素时，将调用onmouseover函数而不带参数。当您在问题中指定PanToMarker的参数时，不是直接指定函数，而是在那里执行函数，然后分配函数的输出。像这样包装函数可以确保在您尝试分配函数时不会调用该函数。

Answer 2

以这种方式添加onmouseover事件处理程序时，您将无法在dom中看到它。

我建议您将索引存储为DOM中的数据属性。然后，您将能够通过鼠标悬停方法访问它...

for (var i = 0; i < relatedProperties.length; i++) {
    var div = document.createElement("div");

    div.innerHTML = relatedProperties[i].formatted_address;
    div.setAttribute('data-index', i);
    div.className = "item_holder";
    div.onmouseover = PanToMarker;
    document.getElementById('relatedpropertyDIV').appendChild(div);
}

function PanToMarker() {
    var selectedIndex = this.getAttribute('data-index');
    map.panTo(relatedProperties[selectedIndex].geometry.location);
}

由于您将i个元素附加到DOM，可能会产生性能影响，每个元素都可能导致重新绘制。最好先创建所有元素，然后追加一次。

var section = document.createElement('section');
for (var i = 0, length = relatedProperties.length; i < length; i++) {
    var div = document.createElement("div");

    div.innerHTML = relatedProperties[i].formatted_address;
    div.setAttribute('data-index', i);
    div.className = "item_holder";
    div.onmouseover = PanToMarker;
    section.appendChild(div);
}

document.getElementById('relatedpropertyDIV').appendChild(section);

function PanToMarker() {
    var selectedIndex = this.getAttribute('data-index');
    map.panTo(relatedProperties[selectedIndex].geometry.location);
}

将mouseover事件添加到javascript创建的DIV中

2 个答案: