jQWidgets Forums

Tagged: DropDownList, event.stopPropagation

This topic contains 4 replies, has 3 voices, and was last updated by mtbvfrAgain 11 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Issue with ‘click event’ delay in iOS 6.1.3 Posts

August 18, 2013 at 9:59 pm Issue with ‘click event’ delay in iOS 6.1.3 #27074

Participant

Click events are fired on the elements which lie under a dropdownlist selection’s screen location in iOS. It does not occur in Android, Windows, or MacOS. It occurs in both Mobile Safari and Chrome 28.0.1500.16 on an iPad 3 and iPhone 4S.

I posted a similar issue in the Tree forum. I am seeing the same ‘late click’ problem using the tree on my apple devices. (I should mention that your menu component is not exhibiting this behavior. It, like most of your components, works extremely well on the Apple devices I am using for testing! You guys have a great product.)

I think that the 500+ ms delay between touch events and clicks in iOS is resulting in unhandled click events. For example, if you press and hold your selected item in the dropdownlist for more than a second, it often prevents a click from being fired on the underlying element.

I can reproduce this behavior in jqWidgets 2.9.3 and 3.0.0 (using jquery 1.9.1 and 1.10.2, respectively.)

Selecting an item from the dropdownlist in the following code results in an alert box being displayed in iOS 6:


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tree Test</title>
    <link href='jqwidgets/styles/jqx.base.css' rel='stylesheet' type='text/css' />
    <script type='text/javascript' src='jquery/jquery-1.10.2.min.js'></script>
    <script type="text/javascript" src='jqwidgets/jqx-all.js'></script>
    <script type='text/javascript'>
        $(function () {
            var source = [
                'Some item',
                'Some item',
                'Some item'
            ];
            $('#dropdownlist').jqxDropDownList({ source: source, width: '200'});
        });
    </script>
</head>
<body>
    <div>
        <div id='dropdownlist'></div>
        <button style='width: 200px; height: 50px;' onclick='alert("Button was clicked!");'>Button</button>
    </div>
</body>
</html>

August 19, 2013 at 5:07 am Issue with ‘click event’ delay in iOS 6.1.3 #27085

Peter Stoev

Keymaster

Hi snethert,

Such behavior happens as the closing is on Touch Start event. Click is happening on Touch End. We will think about improving the events handling for the future versions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 19, 2013 at 6:58 am Issue with ‘click event’ delay in iOS 6.1.3 #27102

snethert

Participant

Peter,

Thanks for the quick response. I assume that you deleted my post in the tree forum because it shared the same root cause?

Is there any sort of event binding I can perform in the interim to prevent this behavior? I’ve tried everything I could think of.

snethert

August 19, 2013 at 7:07 am Issue with ‘click event’ delay in iOS 6.1.3 #27105

Peter Stoev

Keymaster

Hi snethert,

That’s right, the post was duplicating the issue which we confirm. Unfortunately, there is no workaround I can suggest you at present. We should improve the event handling on touch devices and especially to stop the event’s default behavior and propagation i.e if something happened on touch start, click event should not be raised.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 3, 2013 at 9:31 pm Issue with ‘click event’ delay in iOS 6.1.3 #28262

mtbvfrAgain

Blocked

Good afternoon/morning,

I am also looking forward to this bug being fixed.

It appears, to me, that the Div with a Class of “overlay” may need to have event.stopPropagation added to its Click Event Handler. When and where this is inserted into the DOM, I haven’t had the time to debug any further.

However, I did capture the following events that occurred after the Opening of a DropDownList.

//open/touchend:<div style="background-color: transparent;border: none;float: left;width: 251px;height: 28px"><span style="color: inherit;border: none;background-color: transparent;padding-top: 0px;padding-bottom: 0px">contains</span></div>/click:<div style="background-color: transparent;border: none;float: left;width: 251px;height: 28px"><span style="color: inherit;border: none;background-color: transparent;padding-top: 0px;padding-bottom: 0px">contains</span></div>/touchstart:<div style="border: none;background-color: black;padding: 0px;overflow: hidden;margin: 0px;width: 275px;height: 178px"></div>/touchend:<div style="border: none;background-color: black;padding: 0px;overflow: hidden;margin: 0px;width: 275px;height: 178px"></div>/click:<div style="border: none;background-color: black;padding: 0px;overflow: hidden;margin: 0px;width: 275px;height: 178px"></div>/focus:<span style="padding: 0px 4px 4px 3px;margin: 0px 0px 0px 20px;height: 30px;font-size: 24px">Clear</span>/click:<span style="padding: 0px 4px 4px 3px;margin: 0px 0px 0px 20px;height: 30px;font-size: 24px">Clear</span>/

My solution, for the time being, is as follows.

Declare a Global variable – lastTouchStartEvent – and add the following code to your Javascript file.

document.documentElement.addEventListener('touchstart',
                                          function(event){
                                            lastTouchStartEvent=event;
                                          },
                                          true
);

For input[type=”text”] Elements, use the following code example.

var i,objEl = new Object();
objEl=$('input[type="text"]');
for(i=0;i<objEl.length;i++){
  objEl[i].addEventListener('focus',
                            function(event){
                              if (lastTouchStartEvent != null) {
                                if (lastTouchStartEvent.touches.length != 1 || (this != lastTouchStartEvent.touches[0].target && this != lastTouchStartEvent.target)){
                                  this.blur();
                                  lastTouchStartEvent=null;
                                }
                              }
                            },
                            false
  );
}

For other Elements, it appears that the use of blur() has no effect.

Therefore, for elements such as the Filter and Clear “buttons” (Spans) of the Grid Menu, use the following code examples.

$('#filter1divItemsGridCrit,#filter3divItemsGridCrit').on('open',function(event){
                                                                   $('#filterbuttondivItemsGridCrit,#filterclearbuttondivItemsGridCrit').css({'display':'none','top':'0px','position':'absolute'});
                                                                 }
);
$('#filter1divItemsGridCrit,#filter3divItemsGridCrit').on('close',function(event){
                                                                    setTimeout(function(){$('#filterbuttondivItemsGridCrit,#filterclearbuttondivItemsGridCrit').css({'display':'','top':'','position':''});},450);
                                                                  }
);

Hasta pronto, Michael.

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.