javascript - mouseout和click冲突怎么解决??
天蓬老师
天蓬老师 2017-04-11 12:46:44
[JavaScript讨论组]



    
    Document
    
    


    1111
    
    

这里的click就起不了作用了,因为会被mouseout覆盖,怎么解决?

需求是这样的,一个图标移入时是红色,移出来变为灰色,只有当点击后红色才会保留到图标上面,类似于淘宝上面的星级评分。。

谢谢各位解答,大家都建议我用css做,但这里我只是举了个例子,实际是css做不了的,得用js来,因为图标远不止一个,我还要通过当前图标移入时来判断其他图标的颜色显示。。

。。。再解释一下,我为什么非要用mouseout来做不用class也不用hover css 那是因为还有一个绑定的功能。。。


    1星
    2星
    3星
    4星
    5星
    

你选择的是:

要文字显示当前用户选择的星星数。。如果没有用户未点击图标,mouseout后就不显示星星数了。。

谢谢,各位问题已解决,感谢

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(4)
PHP中文网
没有太明白题主的意思,是如果click后mouseout就不执行?
如果是这样的话,那在mouseout的时候做下判断就好了,判断现在text是否是3333,或者通过全局变量来做个控制开关,click之后为false,mouseout执行前先判断。
但按照写的js来看,click之后肯定是会触发其他事件的,那么什么时候才允许触发呢?这个才是逻辑的关键了。




按照题主说的,我这边大概写了下:

var isclick=false;
$("span").on({
    mouseover:function(){
                $("p").text("您已评分星级为:"+$(this).text());
            },
            mouseout:function(){
                if(!isclick){
                    $("p").text("您暂未评分");
                }
            },
            click:function(){
                $("p").text("您已评分星级为:"+$(this).text());
                isclick=true;
            }
})

简单方法加个变量判断用户是否已点击,点击则不执行mouseout事件.

伊谢尔伦

难道你不知道jq有一个方法是hover?

怪我咯

$("span").on({

    mouseover:function(){
        $(this).text("2222");
    },
    mouseout:function(){
        $(this).text("1111");
    },
    click:function(){
        $(this).text("3333");
        $(this).unbind('mouseout');
    }
})
解绑mouseout
PHPz

不会出现这样的需求,为何鼠标移动和点击要控制同一种改变类型。

与其说这是出现了问题,不如说是主动写成了这样的效果。

另外题主可以参考mouseleave和mouseout以及mouseenter和mouseover的差别。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号