Javascript 我们如何提供鼠标点击功能和鼠标覆盖功能？

当我们已经有了鼠标点击事件时，如何添加鼠标点击事件

示例：-

要求-

• 鼠标悬停功能的工作顺序正确。
• 我想将单击事件和鼠标悬停事件一起添加-

当用户单击顶部漏斗和底部圆形中给出的任何图像部分时，它们的相关文本或内容将可见，直到用户单击任何其他部分为止，并且与此单击事件一起，鼠标悬停功能将以相同的方式工作

表示-当用户在图像部分上移动鼠标时，其相关文本将可见，但如果用户单击任何部分，则其相关文本将每次可见，直到用户单击任何其他部分或部分或将鼠标移动到其他部分

下面是我为鼠标悬停功能创建的js，现在我希望鼠标悬停和点击事件同时出现。

var IdAry=['slide1', 'slide2','slide3','slide4','slide5','slide8','slide9','slide12','slide13','slide14','slide15','slide16'];
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;
}

var-IdAry=['slide1'、'slide2'、'slide3'、'slide4'、'slide5'、'slide8'、'slide9'、'slide12'、'slide13'、'slide14'、'slide15'、'slide16']；
window.onload=function（）{
对于（var zxc0=0；zxc0您可以用不同的方式来实现，首先您可以将鼠标悬停行为留给css，正如我所看到的，它只是一个显示文本的区域

div {display:none;}
div:hover, div:active {display:block;}

然后，如果您希望不同事件具有相同的行为，我建议使用jquery，它可以帮助使用on和bind方法声明多个事件

 $.bind('click, hover', function(){
     //do stuff
 })

还有一种方法：

 $.on('click, hover', function(){
     //do stuff
 })

你可以加上

el.onclick= function(){
//code
}

如图所示，这应该不是问题，只需创建两个函数来显示和隐藏文本，并从两个事件调用它们。
即

你也应该考虑使用jQuery，因为它更精选和更干净地选择元素和捕捉事件。也考虑使用CSS类而不是ID-S列表，因为它更干净。
此外，如果您使用css类，即class=“slide”，则可以将前一个文本的结束称为：
el.onclick = function(){
$(".slide").hide(); // hides all text elements.
showFunction();
}

顶部图表：
，而css不能提供切换。相反，请使用属性和属性选择器。两者都可以通过css和jQuery进行操作

CSS:

JS:


底部图表[原始答案]：
通过将属性附加到元素以检测是否已单击该属性，然后在与其他元素交互时将该属性重置为所有元素，可以实现此效果：

$(document).ready(function() {
    $('[id^="slide"]').each(function() {
        $(this).attr('attr-active', 'false');
        $(this).attr('attr-clicked', 'false');
        $(this).click(function(event) {
            event.preventDefault();
            var preExist_ksnfk4n534nj5345 = false;
            if ($(this).attr('attr-clicked') == 'true') {
                preExist_ksnfk4n534nj5345 = true;
            }
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'show', 'hide');
            });
            if (preExist_ksnfk4n534nj5345 == true) {
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'hide', 'show');
            } else {
                $(this).attr('attr-active', 'true');
                $(this).attr('attr-clicked', 'true');
                changeText($(this), 'hide', 'show');
            }
        });
        $(this).hover(function() {
            var isAnyActive_san9h39423ht = false;
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                changeText($(this), 'show', 'hide');
            });
            changeText($(this), 'hide', 'show');
        }, function() {
            if ($(this).attr('attr-active') == 'false') {
                changeText($(this), 'show', 'hide');
            }
            $('[id^="slide"]').each(function() {
                if ($(this).attr('attr-clicked') == 'true') {
                    changeText($(this), 'hide', 'show');
                }
            });
        });
    });
});

function changeText(obj, cl1, cl2) {
    obj.children('span').eq(0).attr('class', cl1);
    obj.children('span').eq(1).attr('class', cl2);
}

您在标记中说
jQuery
，但您的javascript不使用jQuery。您想要jQuery代码还是本地javascript代码？是的，如果您可以提供jQuery代码，那就太好了：）感谢您的回复，我们现在几乎接近我的目的地-唯一剩下的是当用户点击任何选项时，它会显示正确的相关文本-但当我再次将鼠标悬停在其他选项上时，它会显示正确的相关文本，但在悬停其他选项后，它也会隐藏需要作为其i的选定字段如果您仍然将鼠标移到外部或任何其他字段选项-希望您理解我的要求唯一剩下的是默认情况下显示悬停效果，但如果用户选择或单击任何字段，则该字段将每次显示，直到用户单击另一个字段，然后另一个字段将可见-执行鼠标悬停效果ct:）-非常感谢您的工作，我已经阅读了您的代码，甚至在单击任何字段时应用了这些代码（attr active=true）更改为true，但当您将鼠标悬停到任何字段（甚至选定的字段）时，您的attr active值再次更改为false，这需要在用户每次单击另一个字段时都为true:）抱歉，错过了一个小细节，必须对其进行15分钟的调试。有关修改后的解决方案，请参阅EditThank for y我们的回复您做得很好-我真的非常感谢您-肯定会推荐您：）选择一个字段后，仍然需要显示其选定字段，这是确定的，然后再次如果您将鼠标移到同一选定字段上，则会隐藏需要每次都保持可见的选定字段-2选择任何字段后，当我们将鼠标移到其他字段时，会显示其他正确的选项，但当您将鼠标移出时，所选字段将可见。
el.onclick = function(){
$(".slide").hide(); // hides all text elements.
showFunction();
}

.TopGraph a[attr-active="one"]
{
    float:left;
    width:240px;
    height:104px;
    position:absolute;
    left:0;
    top:35px;
    -webkit-border-radius: 20px 100px 100px 20px;
    -moz-border-radius: 20px 100px 100px 20px;
    border-radius: 20px 100px 100px 20px;
    background:url('../images/one-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

.TopGraph a[attr-active="two"]
{
    float:left;
    width:250px;
    height:180px;
    position:absolute;
    left:250px;
    top:51px;
    -webkit-border-radius: 100px 20px 20px 500px;
    -moz-border-radius: 100px 20px 20px 500px;
    border-radius: 100px 20px 20px 500px;
    background:url('../images/two-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

.TopGraph a[attr-active="three"]
{
    float:left;
    width:221px;
    height:103px;
    position:absolute;
    left:84px;
    top:155px;
    -webkit-border-radius: 20px 100px 100px 20px;
    -moz-border-radius: 20px 100px 100px 20px;
    border-radius: 20px 100px 100px 20px;
    background:url('../images/three-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

$(document).ready(function() {
    $('.TopGraph').find('a').each(function() {
        $(this).attr('attr-active', '');
        $(this).attr('attr-clicked', '');
        $(this).click(function(event) {
            event.preventDefault();
            var isAnyActive_dsanjj325kj4 = false;
            if ($(this).attr('attr-clicked') == "true") {
                isAnyActive_dsanjj325kj4 = true;
            }
            $('.TopGraph').find('a').each(function() {
                $(this).attr('attr-active', '');
                $(this).attr('attr-clicked', '');
            });
            if (isAnyActive_dsanjj325kj4 == false) {
                $(this).attr('attr-clicked', 'true');
                $(this).attr('attr-active', $(this).attr('class'));
            }
        });
        $(this).hover(function() {
            if ($(this).attr('attr-clicked') == '') {

                var isAnyActive_dsanjj325kj4 = '';
                $('.TopGraph').find('a').each(function() {
                    $(this).attr('attr-active', '');
                });
            }
            $(this).attr('attr-active', $(this).attr('class'));
        }, function() {
            $('.TopGraph').find('a').each(function() {
                $(this).attr('attr-active', '');
                if ($(this).attr('attr-clicked') == 'true') {
                    $(this).attr('attr-active', $(this).attr('class'));
                }
            });
        });
    });
});

$(document).ready(function() {
    $('[id^="slide"]').each(function() {
        $(this).attr('attr-active', 'false');
        $(this).attr('attr-clicked', 'false');
        $(this).click(function(event) {
            event.preventDefault();
            var preExist_ksnfk4n534nj5345 = false;
            if ($(this).attr('attr-clicked') == 'true') {
                preExist_ksnfk4n534nj5345 = true;
            }
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'show', 'hide');
            });
            if (preExist_ksnfk4n534nj5345 == true) {
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'hide', 'show');
            } else {
                $(this).attr('attr-active', 'true');
                $(this).attr('attr-clicked', 'true');
                changeText($(this), 'hide', 'show');
            }
        });
        $(this).hover(function() {
            var isAnyActive_san9h39423ht = false;
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                changeText($(this), 'show', 'hide');
            });
            changeText($(this), 'hide', 'show');
        }, function() {
            if ($(this).attr('attr-active') == 'false') {
                changeText($(this), 'show', 'hide');
            }
            $('[id^="slide"]').each(function() {
                if ($(this).attr('attr-clicked') == 'true') {
                    changeText($(this), 'hide', 'show');
                }
            });
        });
    });
});

function changeText(obj, cl1, cl2) {
    obj.children('span').eq(0).attr('class', cl1);
    obj.children('span').eq(1).attr('class', cl2);
}