Chrome和Firefox之間行為的JavaScript差異（事件onmouseover）

Question

我的意圖是使其僅在我在輸入邊界內輸入鼠標時img才可見。 我所看到的問題是，該代碼在chrome（版本39）和Firefox（版本35）中的工作方式不同。

在firefox和IE中，它可以按預期工作，但在chrome中，僅當我在邊界內或邊界外單擊時才觸發功能。 我嘗試使用其他事件，例如onmouseenter，onmousemove或onmouseleave，但它們似乎具有相同的結果。

我的代碼有問題嗎？

我有以下代碼：

<html>
<body>
<form><table><tr><td><input name="var1" id="var1"></td><td><img name="var1_img" id="var1_img" src="nostar.png" style="display:inline-block; position:relative; left:-20px" onclick="callClickEvent(this)"></td></tr></table></form>
<script>
var statusImg = 0;
function obtenerObj(idName) {
    var obj = null;
    if (document.getElementsByName && document.getElementsByName(idName)[0]) obj = document.getElementsByName(idName)[0];
    else if (document.getElementById && document.getElementById(idName)) obj = document.getElementById(idName);
    return obj;
}
function makeVisible(idName) {
    console.log("Visible "+idName);
    var obj = obtenerObj(idName+"_img");
    if (obj) obj.style.display = "inline-block";
}
function makeInvisible(idName) {
    console.log("Invisible "+idName);
    var obj = obtenerObj(idName+"_img");
    if (obj) obj.style.display = "none";
}
function callClickEvent(obj) {
    if (obj) {
        if (statusImg == 0) {
            obj.src = "star.png";
            statusImg = 1;
        } else {
            obj.src = "nostar.png";
            statusImg = 0;
        }
    }
}
var obj = obtenerObj("var1");
if (obj) {
    obj.onfocus = function() { makeVisible("var1"); };
    obj.onmouseover = function() { makeVisible("var1"); };
    obj.onmouseout = function() { makeInvisible("var1"); };
    obj.onblur = function() { makeInvisible("var1"); };
}
</script>
</body>
</html>

Answer 1

如果要在懸停輸入時觸發事件，則僅需要onmouseover和onmouseout事件。 我認為您的問題是由td的高度引起的。 當顯示圖像時，td會變大並向下移動，為防止出現此問題，您可以將td的高度聲明為與圖像的高度相同。

<td style="height:150px;"><input name="var1" id="var1"></td><td><img name="var1_img" id="var1_img" src="http://placehold.it/350x150" style="display:inline-block; position:relative; left:-20px" onclick="callClickEvent(this)"/></td>

試試這個工作示例。

Chrome和Firefox之間行為的JavaScript差異（事件onmouseover）

問題描述

1 個解決方案

解決方案1
0 2015-01-19 19:58:29

Chrome和Firefox之間行為的JavaScript差異（事件onmouseover）

問題描述

1 個解決方案

解決方案1 0 2015-01-19 19:58:29

解決方案1
0 2015-01-19 19:58:29