当前位置: 代码迷 >> JavaScript >> 为何鼠标悬停可以取消定时程序,而点击事件不行,该如何处理
  详细解决方案

为何鼠标悬停可以取消定时程序,而点击事件不行,该如何处理

热度:371   发布时间:2012-03-17 19:06:28.0
为何鼠标悬停可以取消定时程序,而点击事件不行
出问题的代码如下:
JScript code

    var timer;
    function setSlide(tabs, output, options, timer) {
          if(timer != "undefined"){
              clearInterval(timer);
          }
          timer = setInterval(function() {tabSlide(tabs, output);}, options.transition_interval);
          return timer;
    }
    function clearSlide(timer) {
      window.clearInterval(timer);
    }

    $.featureList = function(tabs, output, button, options) {

        
        total_items        = tabs.length;
        visible_item    = options.start_item || 0;
        var options            = options || {}; 
        var tabs            = tabs;
        var output          = output;
        var button          = button;
        
        options.pause_on_hover         = options.pause_on_hover         || true;
        options.is_auto_slide        = options.is_auto_slide         || true;
        options.transition_interval  = options.transition_interval     || 500;
        options.button_slide_time    = options.button_slide_time     || 800;
        options.button_up_name       = options.button_up_name        || "查看详情";
        options.button_down_name     = options.button_down_name      || "收起";
        options.desc_area_id            = options.desc_area_id       || "#product-desc";
        
        output.hide().eq( visible_item ).show();
        tabs.eq( visible_item ).addClass('current');

        tabs.click(function() {
            if ($(this).hasClass('current')) {
                return false;
            }
            tabSlide(tabs, output, tabs.index(this));
        });

        if (options.is_auto_slide) {
            timer = setSlide(tabs, output, options, timer);
            if (options.pause_on_hover) {
                //悬浮在tab上停止滚动
                tabs.mouseenter(function() {
                    clearSlide(timer);
                }).mouseleave(function() {
                    timer = setSlide(tabs, output, options, timer);
                });
                //悬浮在图片上时停止滚动
                output.mouseenter(function() {
                    clearSlide(timer);
                }).mouseleave(function() {
                    timer = setSlide(tabs, output, options, timer);
                });
            }
        }
        
        button.click(function() {
            if ($(options.desc_area_id).css("display") == "block") {
                $(options.desc_area_id).slideUp(options.button_slide_time);
                button.html(options.button_up_name);
                timer = setSlide(tabs, output, options, timer);
            }else{
                $(options.desc_area_id).slideDown(options.button_slide_time);
                button.html(options.button_down_name);
                clearSlide(timer);
            }
        });
    };


button.click的cliearSlide居然执行后还不能取消定时程序,而鼠标悬停的时间则没有问题,很奇怪。

timer变量不管在什么范围,都无用,之后用了一个很恶心的解决方法,就是在定时程序中设置一个变量来判断,click事件中,修改变量的值。请问大拿这里出了什么问题。谢谢

------解决方案--------------------
因为Click事件后鼠标还是处于悬停状态,click把鼠标事件取消掉就好了。