jQuery滑块与Mouse事件关联

Question

I am using jquery slider which working fine in chrome browser but when I run the same code in firefox then an event is attach with the mouse and when I move either left or right then It auto slide scroll. 我使用jQuery的滑块，工作在铬细browser ，但是当我在运行相同的代码firefox ，然后一个事件是与鼠标连接，当我移动either向左或right然后自动滑动滚动。

So I want it functionality as like chrome. 所以我想要像chrome这样的功能。 Can any 1 please help me that how can I stop that hover effect from firefox 可以请任何一位帮助我如何停止firefox悬停效果

I am using the samve version of jquery-min.js and jquery-ui.js that is 1.11.1 and jquery-ui.css version 1.9.1 . 我使用的samve版本jquery-min.js和jquery-ui.js是1.11.1和jquery-ui.css版本1.9.1 。

Any one's thought or review is much appreciated 任何人的想法或评论都值得赞赏

I paste complete code below and also set fiddle link 我在下面粘贴完整的代码，并设置小提琴链接

<html>
<head>

   <title>slider problem</title>

  <link href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

</head>
<body>

<div id="" class="span12 sliderSpecific ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" tabindex="-1" style="left: 0%;"></a></div>
<script type="text/javascript">

  $(document).ready(function(){

    $('.sliderSpecific').slider({
      animate: true,
      range: "min",
      step: parseInt(50),
      slide: function( event, ui ) {
        alert(' slider is slide here');
      }
    });
  });

</script>
</body>
</html>

Answer 1

I was able to re-create the issue, but it's not a bug. 我能够重新创建该问题，但这不是错误。 It's browser specific behavior related to how the mouseup event is processed. 这是浏览器特定的行为，与如何处理mouseup事件有关。 Actually IE (edge) has the same behavior as Firefox. 实际上，IE（边缘）与Firefox具有相同的行为。 Chrome seems to be the exception, but you can still simulate the same behavior in chrome. Chrome似乎是个例外，但是您仍然可以在chrome中模拟相同的行为。 I haven't tested Safari or any other browsers. 我尚未测试Safari或任何其他浏览器。 What this comes down to is the slide function is triggered on mousedown . 这归结为在mousedown上触发了slide功能。 You have defined that function as raising an alert. 您已将该功能定义为引发警报。 What typically is happening (I'm guessing) is that after the alert opens you are picking your finger up off the mouse button and clicking again on the OK button. 通常发生的情况（我猜是这样）是在警报打开后，您将手指从鼠标按钮上移开，然后再次单击“ OK按钮。 This causes the alert's message box to handle the mouseup event. 这将导致警报的消息框处理mouseup事件。 Chrome happens to handle it nicely, allowing the parent window (main browser window) to receive the mouseup event. Chrome恰好可以很好地处理它，从而允许父窗口（主浏览器窗口）接收mouseup事件。 Apparently Firefox and IE do not. 显然，Firefox和IE却没有。 Therefore, the page still thinks the mouse button is depressed, and thinks you're still trying to use the slider after you close the alert. 因此，页面仍然认为鼠标按钮被按下，并且认为您在关闭警报后仍在尝试使用滑块。

I think the fact that I can predict that you can simulate this in chrome is evidence that I understand the problem. 我认为我可以预测您可以在chrome中进行模拟，这一事实证明了我理解了这一问题。 The way to simulate it in chrome is to click on the slider and start to drag it, but when the alert opens, do not release the mouse button, instead use the spacebar to "click the OK button". 在chrome中模拟它的方法是单击滑块并开始拖动它，但是当警报打开时，请勿释放鼠标按钮，而应使用空格键“单击OK按钮”。 After the alert closes, while still holding the mouse button down, move left to right and you'll see the same result that you saw in Firefox. 警报关闭后，在按住鼠标键的同时，从左向右移动，您将看到与Firefox相同的结果。 You're manually simulating the way Firefox is treating the mouse's state. 您正在手动模拟Firefox处理鼠标状态的方式。

So how do you fix this? 那么如何解决这个问题？ Remove the alert, or put the alert on a timeout, which will allow the mouseup event to be handled before the alert message box gobbles it up... 删除警报，或将警报置于超时状态，这将允许在警报消息框吞噬mouseup事件之前处理mouseup事件。

$(document).ready(function(){

    // This block isn't necessary, just adding for completion in my example 
    var cnt = 0; // keeping a count for unique messages
    // just adding a container for non-blocking output messages
    $('body').append('<div id="output"></div>');
    // End unnecessary block ----------------------------------------------

    $('.sliderSpecific').slider({
      animate: true,
      range: "min",
      step: parseInt(50),
      slide: function( event, ui ) {
        // Causes unexpected behavior in IE/Firefox 
        //alert(' slider is slide here'); 

        // Non-blocking output option...
        console.log(' slider is slide here');  
        // Another non-blocking output option...
        $('div#output').html(' slider is slide here (' + (cnt++).toString() + ')');

        // Workaround for using blocking output (alert/confirm)
        setTimeout(function() {
            alert('yay, on a delay works!');
        }, 0);
      }
    });

}); }）;

jQuery滑块与Mouse事件关联

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-08-25 06:51:53

jQuery滑块与Mouse事件关联

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-08-25 06:51:53

解决方案1
1 已采纳 2015-08-25 06:51:53