jQuery Possible exposition of Bug in Cross Browser Event handling

Share on linkedin Share on facebook Share on print Share on gmail Share on pinterest_share Share on mailto Share on delicious More Sharing Services 0

First, I have searched and not found a forum or bug list that gives this detail.

I attached a Slider to a Text Area that is a grouped pair within a Sortable, and it's pretty slickl in Firefox, but then went all goofy in IE (7 and 8).

What I discovered was that the "stop" and "start" events of the slider were propagating to parent in IE, but not in Firefox.

Through research, I discovered that one can manually stop propagation on an event (event.stopPropagation()), but my real observation is that the default behavior is different from these two (common) browsers. For those who have dug deeper in the design, should this be a bug in "Slider" that would implement a default "stop" and "start" that do not propagate events so as to be browser consistent? Or does this expose a larger difference in expectations of "bubbling" between browsers that would perhaps fix many issues? Is there, for instance, a common "default" function that can be added in the lower level code?

(sorry for including code here, but it wouldn't go into Attachments)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html3/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>                                 
    <title>Slider in Group Test for Browser Consistency</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link type="text/css" href="css/dark-hive/jquery-ui-1.8.9.custom.css" rel="Stylesheet">
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
    <style>
        #msg_group ul {list-style-type: none}
    </style>
    <script language="javascript" type="text/javascript">
      // Startup Declaration
      $(function() {
         // Sortable Message Windows
         $('#msgs').sortable({
           revert: true,
           axis: 'y'
         });

         $('div[id^="ta_slider_"]').slider({
           orientation: "vertical",
           range: "min",
           min: 6,
           max: 20,
           /*
             // Uncommenting these functions will cause Internet Explorer to behave better...
             // specifically, slider events won't propagate to the "Sort" mechanism.
             // The real issue to address is, of course, the inconsistency of the default
             // behavior between browsers.

           stop: function(event, ui) {
             event.stopPropagation();
           },

           start: function(event,ui) {
               event.stopPropagation();
           },

           */

           slide: function(event,ui) {
             var idx = this.id.replace(/^ta_slider_/,"");
             var conv = $('#TEXT_AREA_'+idx)[0];
             conv.rows = ui.value;
             conv.cols = ui.value/3 + 34;
           }
         });
      });

</script>
</head>                      
<body>                       
    <div id="msg_group">       
      <ul id="msgs">
        <li id="MSG_LI_0">
            <table><tr>
                <td><div id="ta_slider_0" /></td>
                <td><textarea id="TEXT_AREA_0" cols="36" rows="6" readonly="true"></textarea></td>
              </tr></table>
        </li>
        <li id="MSG_LI_1">
            <table><tr>
                <td><div id="ta_slider_1" /></td>
                <td><textarea id="TEXT_AREA_1" cols="36" rows="6" readonly="true"></textarea></td>
              </tr></table>
        </li>
        <li id="MSG_LI_2">
            <table><tr>
                <td><div id="ta_slider_2" /></td>
                <td><textarea id="TEXT_AREA_2" cols="36" rows="6" readonly="true"></textarea></td>
              </tr></table>
        </li>

      </ul>
    </div>                     
</body>                      
</html>

Smilar Topics

Cross browser event management done outside of the libraries?

The topic of event handler management has been covered ... (http://stackoverflow.com/questions/3568753/cross-browser-event-handling) and Marco Demaio (http://stackoverflow ... /questions/3763080/javascript-add-events-cross-browser-function-implementation-use-attachevent-adde ... is generally done for supporting event functionality? There are numerous options ...
cross browser event handling

Below html contains table & a div. both absolute positioned. Table contains a link and onclick event listener. Div also got onclick event listener. Both positioned same so that div borders for link. link and div got onclick eventlistener. click on link fires link onclick. click outside link and within div fires div onclick. above said works for IE only and other browsers link onclcik wont fire if div onclick event listener is there.... My requirement is to keep it working same in all browsers. where click on link fires link onclick listener. and outide link click onl fire div onclick lsitener <table width=50% bgcolor='aqua' style="left:10;top:20;position:absolute "> <tr> <td ><a onclick="alert('clicked link');return false" href="#">click link</a></td> </tr> </table> <div onclick="alert('clicked div');" style="background:transparent;border:1px red solid;;width:300;height:20px;position:absolute;left:10;top:20"></div>
Cross browser event handling

I have a document with a parent element that has mousedown,mouseup and mousemove events registered to it. The parent element has some child elements as well. I observe inconsistent behaviours between browser types when I hold the mouse button down, move the pointer and release the button. ie7 - mouseup fires when over a child or parent op9 - mouseup fires only when over the parent ff2 - mouseup fires only over a child or parent but only if the pointer has moved since the mousedown occured I'm new to events - what can I do to get events to fire (or at least capture them) in the order I want. Tx, Windy
jQuery custom error handler around browser event loop?

... group. My company is using jQuery to build a very cool ... as much right as possible, including exceptionhandling. I've got a ... during the browser event loop. I know that's not a jQuery thing, but I wonder if jQuerymight have ... update the location of the jquery.js and it should work ... > <script type="text/javascript" src="./jquery-1.2.3.pack.js ...
Cross Browser Event Listener

Here is the cross browser code in adding multiple events in an element inside a document. var addEvent = function ( el , ev , func ) { var evnt = el['on'+ev]; el['on'+ev]= function () { if ( typeof evnt == "function" ) { evnt ();} func (); } }; //example: function ex () { alert(2); } addEvent (window , "load" , (function(){alert(1);})); addEvent ( window, "load" , ex );
jQuery Possible Plugin for Adding New Event Types

... created an plugin/extension for jQuery to use the following syntax ... ); So you can bind multiple event types to the same function ... allow us to add new event types ... like mouseenter and mouseleave ... 'm curious about what the jQuery community thinks about this idea ... /jquery/plugins/events_extension/test/test.html"> http://www.brandonaaron.net/jquery ... also hook up the mousewheel event in the same way. $(...).bind ... blog post about binding multiple event types: <a href="http://blog ... /bind-multiple-events-simultaneously-with-jquery/">http://blog.brandonaaron.net/2007 ... /bind-multiple-events-simultaneously-with-jquery/ </a> -- Brandon Aaron
jQuery Possible Animate Bug

There seems to be an animate bug with jQuery 1.2. Try animating the css left value of a relatively or absolutely positioned element. For instance, I have an object with a css left value of "-880px". When I call .animate( {left:"-1760px"} ,300, function(){ alert( $ (this).css('left')}), the callback will result in "-2640px", not "-1760px" like it should be. The above code worked in version 1.1.2, not 1.2.
jQuery Possible .clone() bug in 1.2.1 on IE6

I use jQuery extensively to help create "repeatable" elements in some forms. After upgrading from 1.1.4 to 1.2.1, I noticed it stopped working. I finally narrowed down the cause to the (dynamically set) name attribute no longer getting cloned correctly. Is this expected behavior in 1.2.1, or a legitimate bug? Wanted to check here before submitting a bug to the tracker. You can see a sample, with all relevant code in-line, here: http://dev.nosq.com/jquery_name_bug/
jQuery Possible Draggable Bug

Hi, We have detected a buggy behavior of draggable.js on our website with Firefox. After digging a bit, we found that it might be related to the "overflow-y: scroll" css property we use on the HTML element to permanently show the vertical scrollbar. Is it a jqueryui bug or a firefox bug ? I've put online a modified copy of the draggable sample page to show the buggy behavior : http://www.mably.com/dev/draggable.html Just reduce the size of your Firefoxbrowser window to activate the vertical scrollbar, scroll down a bit and start dragging. You'll see the draggable objet jump up the page the same amount you've scrolled the page down. For the moment we have temporarily disabled the overflow-y:scroll css property. Any help would be greatly appreciated. FranÃ§ois Masurel Bordeaux, FRANCE
jQuery possible to override inline onchange() event?

I have a select box with an inline "onchange()" event that reloads the page. Using jQuery I've created a $('#myForm select').live('change', function (e){...}) event handler to intercept the onchange() behavior and even though I have e.preventDefault() and e.stopPropagation() after my jquery event runs the inline onchange() is still triggered... Am I missing something here? I realize I could easily remove the onchange() from the code but ideally I shouldn't edit the HTML directly and just override it using jquery...
jQuery Possible fadein bug?

I've worked with Jquery for a while now so ... made things as verbose as possible to identify the problem, but ... a problem! Here's the Jquery and HTML. I'll give ...
jQuery Possible Selector Bug?

Everyone, I was just using jQuery 1.3.1 when I came across an issue in IE7. When I click the button the value for the button will be set to "ON" when using IE7 but it works as expected in FF3: Expected result: Value on hidden field should be set to "ON" when the button is clicked Wrong result: The value for the button changed to "ON" when the button is clicked in IE7 Sample Code: <form> <input type="hidden" name="button" value="" /> <input type="button" id="button" value = "Button" /> </form> <script type="text/javascript"> $(function() { $('#button').click(function(){ $("form input[name='button']").val('ON'); }) }); </script>
jQuery + Firefox - Potential bug with hover event?

I came across this at work using jQuery 1.2.4 and now replicated it at home with jQuery 1.3.2. Instructions and example here: http://www.temega.co.uk/dump/4pqjql.html
jQuery ClueTip "custom-width" cross-browser issue

... case). Here is my code: jQuery: <script type="text/javascript"> $('a ...
jQuery how to make cross browser application with javascript

hi, I want to make code in javascript for client side.... it is runninf in IE but not in FireFox............Pls Help
jQuery IE issue... load order, DOM, event handling... ? help please!

all. I'm working on a site where id like an image to fade in as the page shows up. The tricky part (i think) is that you can't trace the load of a background image. So ive made a new image dynamically and traced that, assuming that once the image is loaded there, i can insert it to the background, and remove the loading icon (#loadingGal) code follows! (function($) { $.fn.pageOpening = function(path) { $("#loadingGal").show(); var imageObj = new Image(); $(imageObj).attr("src",path).load(function(){ $("#loadingGal").hide(); $("#leftCol").hide(); $("#leftCol").css("background-image","url("+path+")").fadeIn(1000); }); } $(document).ready(function() { $().pageOpening("images/photo-green-homes.jpg"); }); In IE6, the background image does not load and the loading div does not hide. On refresh however, all is fine. I feel this is a loading order issue with IE... or maybe cache. any help is appreciated!
jQuery cross browser drag/dragging cursor

Sure would be nice if the fantastic jQuery ui had the cross browser ability to show a grab and grabbing cursor on things like sort... please... pretty please :-) -- patrick
Is it possible to extract the normalized Event object and use it outside of jQuery?

This is a random question. I'm in a situation where my script can't depend on the full jQuery lib. But it would be nice to extract and use the normalized jquery.Event object. It prevents a lot of cross-browser compatibility boilerplate. Is this possible, advisable, allowed?
jQuery Key Event Handling

Folk, I'm using JQuery 1.3.2 with a ... VML text object, jQuery's registration of mouse event handlers doesn't ... the way the event gets registered? Strangely, the jQuery registration works for ... it. I needed decent text eventhandling for my text edit widget ... can be over-ridden. The browser differences are as listed here ... total dog's breakfast, and jQuery in trying to fix it ... the arrow, unlike the "fixed" event). Some of the mess is ... 's textInputevent type, and I don't know enough jQuery to ...
Qwerty Shifter (keyboard event handler) cross browser

I am trying to develop a Qwerty Shifter http://www.cross-browser.com/toys/qwertyshifter.html by handlingkeyboard events. I want to display a textbox and as user type any text it changes at once means as user types "a" it display "s" "b" changes "n" for internet explorer I have script function InputEventKeyPress(event){ window.event.keyCode = shifter (window.event.keyCode); } //Key press function shifter (keyAscii) { switch (keyAscii){ //CAPITAL LETTERS A - Z case 65 : return 83; break; //A case 66 : return 78; break; //B case 67 : return 86 ; break; //C } }
jQuery Qwerty Shifter (keyboard event handling)

Hi I am trying to develop a Qwerty Shifter http://www.cross-browser.com/toys/qwertyshifter.html by handlingkeyboard events. I want to display a textbox and as user type any text it changes at once means as user types "a" it display "s" "b" changes "n" for internet explorer I have script BUT want a cross browser solution for this function InputEventKeyPress(event){ window.event.keyCode = shifter (window.event.keyCode); } //Key press function shifter (keyAscii) { switch (keyAscii){ //CAPITAL LETTERS A - Z case 65 : return 83; break; //A case 66 : return 78; break; //B case 67 : return 86 ; break; //C } }
Definitive answer to cross-browser window.onunload event

Hi Am I correct in saying that since Opera does not reliably implement the window.onunload event, that it is NOTpossible to create a predictable cross-browser trap that executes a script on window close? If there is a way to ensure trapping of the onunload event across all browsers, then please let me know.
jQuery Cross-Browser "on variable change" call back

... , but maybe there is elegant jQuery solution for it. I want ... to objects member variable change event i.e. lets say I ... cross-browser solution for this? P.S. I remember there was a jQuery ...
add a print event to jquery: possible ?

... : is it possible to catch the print event via javascript/ jquery? </FONT></SPAN ... , and in fact it is possibleto overwrite the window.print ... it be possible to therefore to include a "print" event to jquery, which ... disable this on a print() event...</SPAN></PRE><PRE><SPAN class ...
jquery 1.2 bug -- clone(true) doesn't copy the event in ie(ie6 and ie7)

jquery 1.2 bug -- clone(true) doesn't copy the event in ie(ie6 and ie7)
Cross browser problem in JQuery 1.2.1, Run on FF1.5 but not IE6

... if this is really a cross browser problem or my misunderstanding, I ... ="jquery/jquery-1.2.1.min.js"></ script> <script language="javascript" src="jquery/jquery ... that highlighted by debugger: r=jQuery.merge(r,ret[i].getElementsByTagName ...
3rd party code interference with responsive jquery event handling

I can't imagine my situation is very unique so I must be failing to see the trees through the forest. 1) We have a site that has a number of JQuery style event handlers. By this I mean we use the ready to apply event bindings based on jq selectors. 2) We have 3rd party JS which we have no control over. Some of it has a tendency to load slowly. In addition it depends on document.write. So when the 3rd party code runs slow it delays the JQ ready which means our page is largely rendered, but the event handling is broken. This results in a horrible UX. I can't AJAX load the script and eval it because then then the document.write will produce is content out of the intended context of the DOM. I have been trying to use regular DOM methods to add the script element in the correct location at the end of the JQ ready so it happens after the events are bound without luck so far. Do any of the experienced JQ users have a recommendation on how to handle 3rd party widgets and event binding?
jQuery Event handling, bubbling, and SELECT change

... seems to me that an event fires on a SELECT element ... between the two kinds of event firing (window just loading versus ... context: http://www.nabble.com/Event-handling%2C-bubbling%2C-and-SELECT ... -tp20777794s27240p20777794.html Sent from the jQuery General Discussion mailing list archive ...
jQuery js cross browser compatibility functions

Hi i am very new to jquery and have heard that it contains functions that hide and handle the cross browserissues behind the scenes? could any provide link where i could find out more about this please?

Perfect MVC code

Tuesday, 26 March 2013