javascript onMouseOver 不触发特定功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13433447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onMouseOver not triggering specific function
提问by determinedto3d
I'm having a very confusing issue and I was wondering if someone could shed some light on it.
我有一个非常令人困惑的问题，我想知道是否有人可以对此有所了解。
I have a DIV element ...
我有一个 DIV 元素...
<div onmouseout="scrollRight();" onmouseover="scrollLeft();" id="rightScrollRegion" class="ScrollRegion"></div>
And an external script file that has ...
以及一个具有...的外部脚本文件
function scrollLeft(){
document.getElementById('rightScrollRegion').style.background = "#0000ff";
}
function scrollRight(){
document.getElementById('rightScrollRegion').style.background = "#ff0000";
}
The problem is that the onmouseover does not seem to call the function scrollLeft(); or scrollRight(); I don't seem to understand where I made an error.
问题是 onmouseover 似乎没有调用函数 scrollLeft(); 或 scrollRight(); 我似乎不明白我在哪里犯了错误。
I did some testing to see if it was something in the function...
我做了一些测试，看看它是否在函数中......
window.onload = function(){
window.onload = 函数（）{
scrollLeft();
}
}
Works in the external file and changes the DIV's background when the pageloads ... so function works.
在外部文件中工作并在页面加载时更改 DIV 的背景......因此功能有效。
I also tried changing what's called in onmouseover ...
我还尝试更改 onmouseover 中的内容...
<div onmouseover="alert('Hello');" id="rightScrollRegion" class="ScrollRegion"></div>
prints an alert window just fine.
打印一个警报窗口就好了。
So I thought maybe I couldn't change the background using onmouseover so I tried ...
所以我想也许我无法使用 onmouseover 更改背景，所以我尝试...
<div onmouseover="this.style.background = '#0000ff'" id="rightScrollRegion" class="ScrollRegion"></div>
And that changes the background as expected.
这会按预期改变背景。
But for some reason I can't get my function to trigger on the DIV. I've search all over the internet and I haven't been unable to find a solution to the issue. I can't seem to find out what I'm doing wrong. I've used external functions in other sites but never with an onmouseover so I'm not sure what could be the issue.
但出于某种原因，我无法让我的函数在 DIV 上触发。我已经在互联网上搜索了所有内容，但我一直无法找到该问题的解决方案。我似乎无法找出我做错了什么。我在其他网站上使用过外部函数，但从未使用过 onmouseover，所以我不确定可能是什么问题。
Any help would be greatly appreciated.
任何帮助将不胜感激。
采纳答案by Asad Saeeduddin
Try this:
试试这个：
element = document.getElementById('rightScrollRegion');
element.addEventListener("mouseover",function(){
this.style.background = "#0000ff";
});
element.addEventListener("mouseout",function(){
this.style.background = "#ff0000";
});
Avoid using inline event handlers. Use the addEventListenermethod to attach event listeners to elements.
避免使用内联事件处理程序。使用addEventListener方法将事件侦听器附加到元素。
You can try this here: http://jsfiddle.net/gkvq8/
你可以在这里试试这个：http: //jsfiddle.net/gkvq8/
回答by Ian Calderon
You can try this:
你可以试试这个：
here is the HTML Element:
这是 HTML 元素：
<button onmouseover="mousein(event)" onmouseout="mouseout(event)">hello</button>
and the functions:
和功能：
function mousein(event){
event.target.style.background="#FF0000";
}
function mouseout(event){
event.target.style.background="#FFFFFF";
}
You should access the element by using the 'event' object. There are better ways to do this, you should research about 'unobstrusive' javascript. here
您应该使用“事件”对象访问该元素。有更好的方法可以做到这一点，您应该研究“不引人注目”的 javascript。这里
回答by faid
your function is opposed to the original function javascript so change the function name like this:
您的函数与原始函数 javascript 相对，因此更改函数名称如下：
<div language="javascript" onmouseout="funcTwo()" onmouseover="funcOne()" id="rightScrollRegion" class="ScrollRegion"></div>
and this
还有这个
function funcOne(){
document.getElementById('rightScrollRegion').style.backgroundColor = "#0000ff";
}
function funcTwo(){
document.getElementById('rightScrollRegion').style.backgroundColor = "#ff0000";
}
回答by Ryan Brodie
If you can, use jQuery. It will make your life a whole lot easier and your code a whole lot more flexible.
如果可以，请使用jQuery。它会让你的生活更轻松，你的代码也更灵活。
To use the jQuery library just include this in your HMTL:
要使用 jQuery 库，只需将其包含在您的 HMTL 中：
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Something like this will do:
像这样的事情会做：
$('div').mouseover(function() {
$('div#rightScrollRegion').attr("style","background-color:#0000ff;");
});
$('div').mouseout(function() {
$('div#rightScrollRegion').attr("style","background-color:#ff0000;");
});
Ideally you would use addClassand removeClassto change the background colours of the div's, however this is merely a simple example solution.
理想情况下，您将使用addClass和removeClass更改 div 的背景颜色，但这只是一个简单的示例解决方案。
