javascript - Clickstaps are passing through absolute positioned divs in JQuery Mobile - Stack Overflow

admin管理员组

文章数量:1335871

I'm not sure if anyone else has experienced this in JQuery Mobile, but for some reason I can't prevent elements underneath my absolute positioned DIVs and fixed header from intercepting clicks/taps on mobile devices.

For example, I have a page that lists contacts in a long scrolling list. On that page is a floating header with a button. If I scroll the list downward and click on the floating header's button, the click will pass through to whatever contact is underneath the header, even though it cannot be visually seen because it is underneath the header.

If I click on a button in the header, the button never triggers - the list element underneath it always fires. If I scroll the list so that there is nothing underneath the header, however, I can click the header's button normally.

So far I've tried: - event.stopPropagation() on the header's button. This never even fired, however. The element underneath always steals focus

• Detecting the click event's Y coordinates. If the coordinates are less than the height of the floating header, abort the click action. This didn't work either, however - after I did "return true;", the button's click handler never fired.

• Setting z-indexes on the floating header and list item container, even though they are already visually correct.

I'm quite stumped. I tried to make a testbed but it works correctly there. It also works correctly on the JQM demo site, so it must be something about my app's CSS or structure. I can't think of what would cause floating elements to show correctly but only be tappable when nothing else tappable is underneath them.

Any ideas would be appreciated!

I'm not sure if anyone else has experienced this in JQuery Mobile, but for some reason I can't prevent elements underneath my absolute positioned DIVs and fixed header from intercepting clicks/taps on mobile devices.

For example, I have a page that lists contacts in a long scrolling list. On that page is a floating header with a button. If I scroll the list downward and click on the floating header's button, the click will pass through to whatever contact is underneath the header, even though it cannot be visually seen because it is underneath the header.

If I click on a button in the header, the button never triggers - the list element underneath it always fires. If I scroll the list so that there is nothing underneath the header, however, I can click the header's button normally.

So far I've tried: - event.stopPropagation() on the header's button. This never even fired, however. The element underneath always steals focus

• Detecting the click event's Y coordinates. If the coordinates are less than the height of the floating header, abort the click action. This didn't work either, however - after I did "return true;", the button's click handler never fired.

• Setting z-indexes on the floating header and list item container, even though they are already visually correct.

I'm quite stumped. I tried to make a testbed but it works correctly there. It also works correctly on the JQM demo site, so it must be something about my app's CSS or structure. I can't think of what would cause floating elements to show correctly but only be tappable when nothing else tappable is underneath them.

Any ideas would be appreciated!

• javascript
• jquery
• html
• css
• jquery-mobile

Share Improve this question Follow asked Sep 18, 2013 at 21:55 AnthonyAnthony 5,4331212 gold badges5454 silver badges8787 bronze badges 4

• I've noticed this behavior on WP8 but not other devices. What platforms are you seeing this on? Also could you provide an example of your html, css, and script? – bmasterson Commented Sep 18, 2013 at 22:02
• It's happening on a Galaxy S3 (Android) and iOS Safari, but not on Chrome (Windows 7) I wish I could provide a sample, but I can only get it to happen in the actual app and the app is under NDA. Did you ever figure out a cure in WP8? – Anthony Commented Sep 19, 2013 at 1:31
• Fairly "well-known" and unfixed on Android (see here). On Android I fixed it like this. Which version of JQM are you using? – frequent Commented Sep 19, 2013 at 8:32
• That sounds like the problem, though your fix wouldn't work for my scenario since I'm not doing a modal dialog. I'd need to disable any element that slides under my floating element, which is pretty tricky. I'm using JQM 1.3.1. Since I can't repo the bug from my phone on jquerymobile., I may disassemble my web-app until the functionality works, then re-enable things to see where the problem is. I'll post what I find. – Anthony Commented Sep 19, 2013 at 12:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Figured this one out though a long process of elimination. The new "panel" introduced in JQM 1.3 causes problems with fixed headers on mobile devices. Any clicks on the header are ignored, as if the header has a lower z-index than what sits beneath it, even though it is visually on top.

I found the issue by ripping all of the classes off of the ui-panel-content-wrap DIV

var wrapper = $(".ui-panel-content-wrap");
$(wrapper).removeClass('ui-body-c').removeClass('ui-panel-animate').removeClass('ui-panel-content-wrap-closed').removeClass('ui-panel-content-wrap');

Once I did this, it of course broke the panel, but my fixed header was properly clickable again.

From there, I re-introduced each class until I found that "ui-panel-content-wrap" was the offender. I then traced it down to this:

/* hardware acceleration for smoother transitions on WebKit browsers */
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) > div,
.ui-panel-animate.ui-panel-closed.ui-panel-display-reveal > div,
.ui-panel-animate.ui-panel-content-wrap,
.ui-panel-animate.ui-panel-content-fixed-toolbar {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}

If you ment out or override -webkit-transform: translate3d(0,0,0); fixed headers will begin trapping events.

What I did for WP8 was put a backdrop behind your elements that has a click handler. If the click falls through, the element underneath will catch it. Usually there is a backdrop behind modals so that's where I put it. The e.stopPropagation() is overkill but shouldn't hurt. You might also try one of the fixes in the ments. For the element that isn't firing when it should be, I don't know the circumstances but make sure your element is fully loaded before attaching the handler or attach it to the parent with the selector parameter parent.on('click','.button',function(){ //code });

html

<div class="backdrop"></div>

css

.backdrop{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

js

$(document).ready(){
    $('.backdrop').on('click',function(e){
        e.stopPropagation();
        return false;
    }
}

You can also just attach the click handler to the main parent of the elements to prevent it falling through as well.

I just had the same problem (though not in the header). Just for the record, if anyone else visits the page. Applying z-index: 1; to the tapped element solved it. Taps are now being recognized.

本文标签： javascriptClickstaps are passing through absolute positioned divs in JQuery MobileStack Overflow