PrototypeJS causes jQuery ui's slider widget to fail in IE8. Is there a workaround?_问答_开发者

PrototypeJS causes jQuery ui's slider widget to fail in IE8. Is there a workaround?

开发者 https://www.devze.com 2023-01-16 11:29 出处：网络

I am using jQuery UI\'s slider widget, and if the prototype js library is also included on the page, I find the following incorrect behavior in IE8 (other browsers are fine):

I am using jQuery UI's slider widget, and if the prototype js library is also included on the page, I find the following incorrect behavior in IE8 (other browsers are fine):

While hovering over the handle, pressing and holding the mouse button causes the handle to immediately jump to the bottom of the slider. Attempting to drag does not move the handle.
However, if I click a point on the slider other than the current position of the handle, the handle jumps to that point, and I can then drag the handle freely (as it should.)

Eliminating prototype from the page resolves this behavior.

Code below -- I am using jQuery's noconflict so in principle Prototype and jQuery should play nice together...but clearly something's going awry here.

Any ideas about how to work around this? Thanks so much!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <!-- eliminating the following li开发者_如何学编程ne resolves the bug -->
  <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" />
  <script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(function () {
      var setupVolumeSlider = function () {
        $j("#volume-slider").slider({
          orientation: "vertical",
          min: 0,
          max: 100
        });
      };
      setupVolumeSlider();
    });
  </script>
  <style type="text/css">
    body { padding: 100px; }
    div#volume-slider { height: 100px;}
  </style>
  </head>
  <body>
    <div id="volume-slider"></div>
  </body>
</html>

Cheers to Scott Gonzales and the jQuery team! Discussed here and fixed on jQuery Master