如何同時添加鼠標懸停和點擊事件？

Question

我有兩個不同的示例，一個具有鼠標懸停功能，另一個具有單擊事件功能，但是現在我希望兩者都在下面進行說明：

Mouseover示例鏈接： http ： //wheaton.advisorproducts.com/investment-advisory

鼠標單擊示例： http ： //ivyfa.advisorproducts.com/financial-planning-process

要求是這樣的

在這個例子中（ http://ivyfa.advisorproducts.com/financial-planning-process ）現在鼠標懸停功能正在運行，但現在我想要以下功能：

1. 當用戶將鼠標移動到圖像上時，對於漏斗和圓圈示例，中心相關文本將可見。
2. 如果用戶單擊任何圖像部分，則它們的相關文本將始終可見，直到用戶單擊另一圖像或部分。
3. 當用戶鼠標懸停在diif-2圖像部分上時，隨着此點擊事件以及其他相關文本將是可見的，當用戶將鼠標移出圓圈時，將顯示所選擇的文本。

最后我想合並兩個例子

解釋這個例子非常復雜，抱歉:(

以下是用於鼠標懸停功能的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;
}

以下是用於點擊事件功能的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();
}

謝謝Sushil

Answer 1

您可以將多個事件名稱添加到同一作業：

$(document).on('mouseover click', '.yourObject', function (event) {
    if (event.type === "mouseover") {
        // Mouse-Over code here
    } else if (event.type === "click") {
        // Click code here
    }
});

此外，嘗試使用addEventListener而不是硬編碼事件，如el.onmouseout=function(){...}使用：

el.addEventListener("mouseout", function () {...});

如果需要，這將使管理事件（例如刪除它們）變得更容易。

Answer 2

您可以使用將多個事件添加到DOM

$(document).on('mouseover','.yourObject', function(){ //over code })
           .on('click', '.yourObject', function() { //click code});

Answer 3

你的代碼的問題是你設置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));