Closed
Description
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
If I listen for a hammer.js event on an element, it blocks vertical scrolling.
Expected/desired behavior
I would not expect scrolling to be blocked
Reproduction of the problem
- Create new project with
ng new my-project-of-doom - Update app.component.ts to look like this:
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-root',
template: `
<div *ngFor="let item of items" (swipe)="test()">
Item #{{item.id}}
</div>
`,
styleUrls: ['app.component.css']
})
export class AppComponent {
private items: any;
constructor() {
this.items = [];
for ( let i = 0; i < 500; i++ ) {
this.items.push( {id:i} );
}
}
test(){
alert('swiping!');
}
}
- In the src/index.html file, add a script tag for Hammer.js before the end of the
<head></head>block.
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
- Execute
ng serveand open the page on a mobile device (I tested on iPhone 6S) - Attempt to scroll. Observe being unable to do so.
- Open
./node_modules/@angular/platform-browser/src/dom/events/hammer_gestures.js - Go to line 32, 33. Comment them out so the section looks like this:
var mc = new Hammer(element);
//mc.get('pinch').set({ enable: true });
//mc.get('rotate').set({ enable: true });
for (var eventName in this.overrides) {
mc.get(eventName).set(this.overrides[eventName]);
}
return mc;
- Modify
app.component.tsso it re-compiles. - Refresh page on mobile device, verify that scrolling can happen.
From the Hammer.js docs:
By default it adds a set of tap, doubletap, press, horizontal pan and swipe, and the multi-touch pinch and rotate recognizers. The pinch and rotate recognizers are disabled by default because they would make the element blocking, but you can enable them by calling:
Please let me know what I can do to help resolve this issue.
Thanks,
Dan
Metadata
Metadata
Assignees
Labels
No labels