Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

shouldHijackClicks does not work (when associated with ionic?) #1528

Closed

Description

@shprink

the function:

if (shouldHijackClicks) {
  document.addEventListener('click', function(ev) {
    // Space/enter on a button, and submit events, can send clicks
    var isKeyClick = ev.clientX === 0 && ev.clientY === 0;
    if (isKeyClick || ev.$material) return;

    // Prevent clicks unless they're sent by material
    ev.preventDefault();
    ev.stopPropagation();
  }, true);
}

if (shouldHijackClicks) {

does not work when using Android or IOS. It easily reproductible using Chrome dev tools. Try Nexus 5 or Iphone 6 and you will see that none of the button, link etc work..

When I comment the above code it works as expected.

Using Angular 1.3.13, Ionic beta14 and Material 8.0.1-rc1

Hope it helps :)

Activity

  1. bradmartin commented on Feb 16, 2015

    @bradmartin

    #1406 - I opened this issue which someone pointed out the removal of hammerJS and it is most likely causing conflicts with ng-material's implementation and other frameworks/libraries. I don't know much about 'shouldHijackClicks'. @shprink

  2. jmarsault commented on Feb 17, 2015

    @jmarsault

    I modified shouldHijackClicks to not stop events from ionic :
    if (isKeyClick || ev.$material || ev.isIonicTap) return;

    But 8364fb5 seems to cause an other problem with the navigation history of ionic. I'm unable to go back with the back button of the mobile after closing a popover.

  3. modified the milestone: 0.9.0 on Feb 17, 2015
  4. mvidailhet commented on Feb 18, 2015

    @mvidailhet

    Same behavior here. I actually had to do this to make it work :

    if (isKeyClick || ev.isIonicTap) return;
    

    Otherwise the click event was fired twice on buttons.

  5. mattkendall commented on Feb 25, 2015

    @mattkendall

    This may be an unsupported combination, but I'm using Google Maps inside of an angular material app and I also had to make modifications to the aforementioned if statement in order to get map clicks recognized.

    I am not using Ionic on this project.

  6. rpignolet commented on Mar 18, 2015

    @rpignolet

    For me 81bcf7f solve the double call issue on Ionic. The ng-click handler is called only once.

    Try putting this in your bower.json:

    "angular-material": "0.8.3-master-81bcf7f"
    

    I'm using Ionic beta 14.

  7. bonatoc commented on Mar 18, 2015

    @bonatoc

    I had to comment the entire if statement as well.

    • Ionic 1.0.0-beta.14 (magnesium-mongoose)
    • Angular v1.3.15 (locality-filtration)
    • angular-material v0.8.3-master-a15347c

    81bcf7f is present but does not fix the issue.

    @jmarsault - In trying your suggestion, the large md-buttons get clicked only when clicking on the button's text.

    Anyone knows what are the implications of removing the statement entirely?

  8. HriBB commented on Mar 19, 2015

    @HriBB

    I have the same problem. None of the suggestions above work. Cannot tap on google map marker on android at all ...

  9. mattkendall commented on Mar 19, 2015

    @mattkendall

    @HriBB, you can modify the if statement to look for the property ev.j on the event. I don't know what this property represents (it's coming from minified maps code), but it appears to be unique to map events. That's obviously brittle and sub-optimal, but it does work.

  10. added a commit that references this issue on Mar 25, 2015
    c32feec
  11. rlucian commented on Mar 27, 2015

    @rlucian

    It appears that with the above suggestions by @mattkendall and the fix proposed initially by @jmarsault the clicks are properly registered.

    When the bugs have been moved to the 0.10.0 milestone I've created a fork with the fixes and compiled the angular-material.js and angular-material.css and included them in the /dist/ folder so people that would like to test don't have to go through 'gulp compile'. You can find the fork and the compiled files ready for use here: https://github.com/EvolutionLabs/material/tree/ionic-fix/dist .

    I haven't placed a pull request since the fix has not been thoroughly verified, but they are useful to get a good feeling of how Ionic works/looks with angular material until the upstream fixes the issues.

    There seem to be some other issues with scrolling certain elements (experienced by me) or back button issues (reported by @jmarsault) so please use with caution. I'd be happy to accept pull requests for other fixes and I plan to keep the repo synced with upstream.

    I'm not a very experienced github user yet, so I hope this is a proper approach and it helps...

  12. ThomasBurleson commented on Apr 11, 2015

    @ThomasBurleson
    Contributor

    @kennethcachia - interesting idea for quick bandaid on Ionic conflicts: ev.isIonicTap

  13. modified the milestones: 0.9.0, on Apr 14, 2015
  14. mwilc0x commented on Apr 28, 2015

    @mwilc0x

    Just ran into this issue on iOS with an md-select using ionic.

    👍 for the ev.isIonicTap

  15. added a commit that references this issue on May 6, 2015
    4bb8d6f
  16. added
    in progressMainly for in progress PRs, but may be used for issues that require multiple PRs
    on May 6, 2015
  17. removed
    in progressMainly for in progress PRs, but may be used for issues that require multiple PRs
    on May 7, 2015
  18. removed this from the - Backlog milestone on Feb 23, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions