javascript 如何同时添加鼠标悬停和点击事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13530014/
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
How to add both mouseover and click event at same time?
提问by Sushil Raghav
I have two different example one have mouseover functionality and other have click event functionality but now i want both together below are the description:
我有两个不同的例子，一个有鼠标悬停功能，另一个有点击事件功能，但现在我想要下面的描述：
Mouseover Example Link:http://wheaton.advisorproducts.com/investment-advisory
鼠标悬停示例链接：http : //wheaton.advisorproducts.com/investment-advisory
Mouse click Example :http://ivyfa.advisorproducts.com/financial-planning-process
鼠标点击示例：http : //ivyfa.advisorproducts.com/financial-planning-process
Requirement are like this
要求是这样的
In this example ( http://ivyfa.advisorproducts.com/financial-planning-process) right now mouseover functionality is working but now i want below functionality:
在这个例子中（http://ivyfa.advisorproducts.com/financial-planning-process）现在鼠标悬停功能正在工作，但现在我想要以下功能：
- When user move mouse over the images then in center thier related text will be visible both for funnel and below circle example.
- If user click on any of the image section then their related text will be visible everytime untill user click on another image or portion.
- Along with this click event when user mousehover on diif-2 images section then also thier related text will be visible , when user move mouse out of the circle then the selcted text will be shown.
- 当用户将鼠标移到图像上时，在漏斗和圆形下方的示例中，它们的相关文本将在中心可见。
- 如果用户单击任何图像部分，则每次都可以看到其相关文本，直到用户单击另一个图像或部分。
- 当用户将鼠标悬停在 diif-2 图像部分时，与此单击事件一起，然后他们的相关文本也将可见，当用户将鼠标移出圆圈时，将显示所选文本。
In the end i want to merge both the examples
最后我想合并这两个例子
Its very complicated to explain this example sorry for that :(
解释这个例子非常复杂，抱歉:(
Below is the js code used for mouseover functionality:
下面是用于鼠标悬停功能的 js 代码：
/*-----Only for hove over image -show hide text------*/
var IdAry=['slide1','slide2','slide3','slide4'];
window.onload=function() {
for (var zxc0=0;zxc0<IdAry.length;zxc0++){
var el=document.getElementById(IdAry[zxc0]);
if (el){
el.onmouseover=function() {
changeText(this,'hide','show')
}
el.onmouseout=function() {
changeText(this,'show','hide');
}
}
}
}
function changeText(obj,cl1,cl2) {
obj.getElementsByTagName('SPAN')[0].className=cl1;
obj.getElementsByTagName('SPAN')[1].className=cl2;
}
Below is the js code used for click event functionality:
以下是用于单击事件功能的 js 代码：
/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide4'];
window.onload = function () {
for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
var el = document.getElementById(IdAry[zxc0]);
if (el) {
setUpHandler(el);
el.onmouseover = function () {
changeText(this,'hide','show')
}
el.onmouseout = function () {
changeText(this,'show','hide');
}
}
}
}
/*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/
function setUpHandler(el) {
$("#" + IdAry.join(",#")).click(function () {
$(this).addClass("selected");
$("#graphics .selected").not(this).removeClass("selected");
})
/*---------This will add show hide class to thier spans and vise versa-------*/
$("#" + IdAry.join(",#")).click(
function () {
changeText(this, "hide", "show");
clearSelection();
},
function () {
changeText(this, "show", "hide");
clearSelection();
})
}
function changeText(obj, cl1, cl2) {
obj.getElementsByTagName('SPAN')[0].className = "hide";
obj.getElementsByTagName('SPAN')[1].className = "show";
if (prev && obj !== prev) {
prev.getElementsByTagName('SPAN')[0].className = "show";
prev.getElementsByTagName('SPAN')[1].className = "hide";
}
prev = obj
}
function clearSelection() {
if (window.getSelection) window.getSelection().removeAllRanges();
else if (document.selection) document.selection.empty();
}
Thanks Sushil
谢谢苏希尔
回答by Cerbrus
You can add multiple event names to the same assignment:
您可以将多个事件名称添加到同一个分配中：
$(document).on('mouseover click', '.yourObject', function (event) {
if (event.type === "mouseover") {
// Mouse-Over code here
} else if (event.type === "click") {
// Click code here
}
});
Also, try to use addEventListenerinstead of hardcoding events like el.onmouseout=function(){...}use:
另外，尝试使用addEventListener而不是像el.onmouseout=function(){...}use这样的硬编码事件：
el.addEventListener("mouseout", function () {...});
That'll make it easier to manage the events (Remove them, for example), should that be needed.
如果需要，这将使管理事件（例如，删除它们）更容易。
回答by toxicate20
You can add multiple events to a DOM by using
您可以使用以下方法将多个事件添加到 DOM
$(document).on('mouseover','.yourObject', function(){ //over code })
.on('click', '.yourObject', function() { //click code});
回答by Yury Tarabanko
The problem with your code is that you are setting window.onload twice. Since your are using jQuery you can make it work by binding on document.ready event.
您的代码的问题在于您设置 window.onload 两次。由于您使用的是 jQuery，您可以通过绑定 document.ready 事件使其工作。
//first sample
(function($){
/*-----Only for hove over image -show hide text------*/
var IdAry=['slide1','slide2','slide3','slide4'];
$(function() {
for (var zxc0=0;zxc0<IdAry.length;zxc0++){
var el=document.getElementById(IdAry[zxc0]);
if (el){
el.onmouseover=function() {
changeText(this,'hide','show')
}
el.onmouseout=function() {
changeText(this,'show','hide');
}
}
}
});
function changeText(obj,cl1,cl2) {
obj.getElementsByTagName('SPAN')[0].className=cl1;
obj.getElementsByTagName('SPAN')[1].className=cl2;
}
}(jQuery));
//second sample
(function($){
/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide4'];
$(function () {
for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
var el = document.getElementById(IdAry[zxc0]);
if (el) {
setUpHandler(el);
el.onmouseover = function () {
changeText(this,'hide','show')
}
el.onmouseout = function () {
changeText(this,'show','hide');
}
}
}
});
/*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/
function setUpHandler(el) {
$("#" + IdAry.join(",#")).click(function () {
$(this).addClass("selected");
$("#graphics .selected").not(this).removeClass("selected");
})
/*---------This will add show hide class to thier spans and vise versa-------*/
$("#" + IdAry.join(",#")).click(
function () {
changeText(this, "hide", "show");
clearSelection();
},
function () {
changeText(this, "show", "hide");
clearSelection();
})
}
function changeText(obj, cl1, cl2) {
obj.getElementsByTagName('SPAN')[0].className = "hide";
obj.getElementsByTagName('SPAN')[1].className = "show";
if (prev && obj !== prev) {
prev.getElementsByTagName('SPAN')[0].className = "show";
prev.getElementsByTagName('SPAN')[1].className = "hide";
}
prev = obj
}
function clearSelection() {
if (window.getSelection) window.getSelection().removeAllRanges();
else if (document.selection) document.selection.empty();
}
}(jQuery));
