All geek questions in one place

Cancel ng-swipe-right on child

In my angular application, the body has ng-swipe left and right to switch the sidebar. The problem is that on my page I have a scrollable horizontal DIV. It will not scroll due to body scrolling.

 <body ng-swipe-right="sidebar = true" ng-swipe-left="sidebar = false"> <div class="scrollable-x">long content that overflow on x</div> </body>

Is there a way to prevent scrolling and allow scrolling of a child?

I tried setting $event.stopPropagation() when scrolling through a div, so the scroll bar no longer switches, but the content will not scroll.

Any idea?

+6
source share
3 answers

UPDATE

I looked at allenhwkim's answer and he is really right that $event distribution can be easily stopped. I took it for granted (without checking) that attaching the ng-swipe-* directive to another element would start firing individual events. I was clearly wrong.

The violin is updated HERE .

Below is the answer, mostly garbage.

There is still one problem with stopPropagation - the mouse up event does not fire.

The most elegant solution would be to decorate the ng-swipe-* or $swipe directives, and then study their code, and I don't think it is possible.

Another option is to create your own directive, which will manually attach ng-swipe-* , take care of the compilation process and provide the desired functions. Of course, the bit is complicated.

What I came up with is a quick hack. The idea is to add an attribute to an element whose descendants should not run ng-swipe-* .

Js

 myApp.value('shouldFire', function(element){ var update = true; // strange enough $event.fromElement is always null var current = element; while(current && current != document.body){ if(current.getAttribute('swipe')=='cancel'){ update = false; break; } current = current.parentElement; } return update; }) function MyCtrl($scope, shouldFire) { $scope.sidebar = false; $scope.updateSidebar = function($event, show){ var element = $event.toElement || $event.srcElement; shouldFire(element) && ($scope.sidebar = show); } }

HTML

 <div class="cont" ng-swipe-right="updateSidebar($event, true)" ng-swipe-left="updateSidebar($event, false)"> ... <div class="pan-container" panhandler="" content-width="500px" swipe="cancel">

UPDATED DEMO

caution

  • in android chrome.v.39 angular -panhandler does not work.
  • $event stores the correct touch event (android chrome) or custom event (desktop chrome); in the latter case, $event.fromElement always null .
  • The proposed solution is a quick hack - it is neither elegant nor general. However, it would theoretically be possible to support multi ng-swipe-* setting different values ​​in the swipe attribute.
+2
source

$event.stopProgagation() should work. I do not know why you are not working.

http://plnkr.co/edit/AqczfhAVGMXNOcJij0JE?p=preview

  var app = angular.module('myApp',['ngTouch']); app.controller("MyCtrl", function($scope) { $scope.void = function(evt){ evt.stopPropagation(); } });

Common sense is that scrolling and scrolling left / right are different.

switching is fast. If you do not move fast. he does not click. When you scroll slowly, scrolling does not occur.

I think all users are aware of this (maybe not). If not, I would recommend the UX approach, so that the user scrolls slowly showing some button or something else, and leaving the swipe as it is.

Anyway, there is a way to disable scrolling with stopPropagation

Let me know if this plnkr does not meet your requirements.

+1
source

Like this. In a scrollable element (usually the dom element that you specified as overflow-x: scroll), add ng-swipe-right = "preventScrollingFunction ($ event)" , for example:

 <div ng-swipe-right="preventScrollingFunction($event)">...</div>

Then in the scope create a function:

 $scope.preventScrollingFunction = function($event) { $event.stopPropagation(); }

It should be!

Note: make sure that the parameter for the function is exactly $ event , since it is marked with Angular, and if you call it $ evt or $ e or something else, it will not work.

0
source

Source: https://habr.com/ru/post/973645/

More articles:


All Articles