Разница в поведении Javascript между chrome и firefox (событие onmouseover)

Мое намерение состоит в том, чтобы сделать так, чтобы 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>

javascript google-chrome html firefox onmouseover
person Gustavo Moreira    schedule 19.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите инициировать событие при наведении курсора на ввод, вам нужны только события onmouseover и onmouseout. Я думаю, что ваша проблема вызвана высотой тд. Когда вы показываете изображение, 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>

Попробуйте этот рабочий пример.

person Bellu    schedule 19.01.2015
comment
Извините, но у меня все еще такое же поведение. Он становится видимым/невидимым только тогда, когда я нажимаю внутри/снаружи ввода. - person Gustavo Moreira; 20.01.2015
comment
Вы попробуете мой пример? - person Bellu; 20.01.2015