javascript onmouseover 和 onmouseout 问题答案

【问题标题】：javascript onmouseover and onmouseout issuejavascript onmouseover 和 onmouseout 问题
【发布时间】：2011-09-09 09:07:16
【问题描述】：

好的，我有一个 javascript 翻转。我希望在开始时选择 clicked3 图片，当我将其翻转或翻转其他图片时，clicked3 将被取消选择。我的 html 中的图片 ID 是：clicked1,clicked2,clicked3,clicked4。我已经完成了这段代码，但它不起作用。似乎图片 1 翻转不起作用，图片 3 没有开始选择...有什么帮助吗？

window.onload=function() {
    var domClicked1=document.getElementById("clicked1");
    var domClicked2=document.getElementById("clicked2");
    var domClicked3=document.getElementById("clicked3");
    var domClicked3=document.getElementById("clicked4");

    clicked1.call(domClicked1);
    clicked2.call(domClicked2);
    clicked3.call(domClicked3);
    clicked4.call(domClicked4);

    domClicked1.onmouseover=handleOver1;
    domClicked2.onmouseover=handleOver2;
    domClicked3.onmouseover=handleOver3;
    domClicked3.onmouseover=handleOver4; 


    domClicked1.onmouseout=handleOut1;
    domClicked2.onmouseout=handleOut2;
    domClicked3.onmouseout=handleOut3;
    domClicked4.onmouseout=handleOut4;

}

function clicked1(){
    this.style.backgroundPosition = "0px top";
}

function handleOver1() {
    this.style.backgroundPosition = "-198px top";
}

function handleOut1() {
    this.style.backgroundPosition = "-198px top";
}



function clicked3(){
    this.style.backgroundPosition = "-198px top";
}

function handleOver3() {
    this.style.backgroundPosition = "-198px top";
}

function handleOut3() {
    this.style.backgroundPosition = "0px top";
}

【问题讨论】：

你为什么不使用 jQuery 有什么特别的原因吗？
因为我工作的代理想要这样......有什么帮助吗？
我认为你应该说服你的代理人这只是个坏主意。
我试过了..如果你有答案虽然会很好..我想我会使用 jquery 但不认为他会接受它

标签： javascript dom onmouseover background-position onmouseout

【解决方案1】：

尝试删除一些代码并逐个问题地解决您的问题。例如...首先尝试显示图片3 开始选择...然后从那里开始进一步编码。

【讨论】：

以及图片3被选中并与if put一起使用：window.onload=function(){ clicked3(); } function clicked3(){ document.getElementById("clicked3").style.backgroundPosition = "-198px top"; }

【解决方案2】：

首先，您应该为所有元素只使用一个事件侦听器。将事件侦听器提供给包含您的元素的父级，并使用e.target 引用被单击的事件侦听器。使用一个事件侦听器用于鼠标悬停，一个用于鼠标移出，一个用于单击。这将节省资源。

然后，不要即时更改 CSS 属性，而是为给定的类名称设置 CSS 规则，并使用 JavaScript 仅添加/删除该类。

此外，当您更改与 CSS 协调的背景时，您应该始终使用相同的方法，例如，如果您在一个坐标上使用像素，则对另一个坐标也使用像素，例如 "-198px 0" 而不是 "-198px top"。

【讨论】：

【解决方案3】：

我终于成功了！！！

window.onload=function() {
var domClicked1=document.getElementById("clicked1");
var domClicked2=document.getElementById("clicked2");
var domClicked3=document.getElementById("clicked3");
var domClicked4=document.getElementById("clicked4");



clicked3.call(domClicked3);

domClicked1.onmouseover=handleOver1;
domClicked1.onmouseout=handleOut1;

domClicked2.onmouseover=handleOver2;
domClicked2.onmouseout=handleOut2;

domClicked3.onmouseover=handleOver3; 
domClicked3.onmouseout=handleOut3;

domClicked4.onmouseover=handleOver4;
domClicked4.onmouseout=handleOut4;

}

function handleOver1(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOut1(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOver2(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOut2(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}



function clicked3(){
    this.style.backgroundPosition = "-198px top";
}

function handleOver3() {
    this.style.backgroundPosition = "-198px top";
}

function handleOut3() {
    this.style.backgroundPosition = "0px top";
}

function handleOver4(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

function handleOut4(){
document.getElementById("clicked3").style.backgroundPosition="0px top";
}

【讨论】：