标签: hammer.js

我正在使用 Angular CLI 11.0.2 开发一个角度应用程序，并在应用程序中使用HammerJS来处理滑动事件。

当我编译应用程序时，出现以下警告消息：

Warning: F:\Programs\GoodRiddles\git\angular\src\app\config\hammerjs.config.ts depends on 'hammerjs'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

根据我在这里的理解，我应该用 ECMA 版本的库替换 HammerJS。

我的问题是： 是否有正确的方法（而不是简单地隐藏消息）来修复它？我需要使用另一个库吗？

如果它可以帮助，这就是我使用它的方式：

import { Injectable } from '@angular/core';
import { HammerGestureConfig } from "@angular/platform-browser";
import * as hammer from "hammerjs";

@Injectable()
export class HammerConfig extends HammerGestureConfig {
    overrides = <any>{
        swipe: { direction: hammer.DIRECTION_HORIZONTAL },
        pinch: { enable: false },
        rotate: { enable: false }
    };
}

我已经开始使用Hammer.js(https://github.com/eightmedia/hammer.js),这是一个很棒的小脚本,但我不确定如何使用jQuery的.on()事件处理程序委派事件.

我在这里设置了一个小jsfiddle示例:http://jsfiddle.net/will/3dUKu/1/

var i = 0;
// How would I apply hammer to this situation?
$('nav').on('click', 'button', function() {
    $('<button id="' + i + '">Extra button ' + i + ' (' + $(this).attr('id') + ')</button>').appendTo('nav');
    i++;
});

当meta name ="viewport"设置为user-scalable = yes时,如何检测缩放的缩放比例(或缩放距离)？

我已经在Android上进行了测试,但如果meta name ="viewport"设置为user-scalable = yes,则无法检测到缩放到缩放.如果meta name ="viewport"设置为user-scalable = no,则可以检测到缩放到缩放但是我无法放大文档.

这是我对jsFiddle的测试:

Hammer.js:http: //jsfiddle.net/pE42S/

var pziW = "test";
var viewport_width = $(window).innerWidth();
var zoom = 0;

var hammer = new Hammer(document.getElementById("touchme"));

hammer.ontransformstart = function(ev) {
    console.log("ontransformstart");
    console.log(ev);
    //pziW = $(window).innerWidth() / 2 * ev.scale;
    zoom = ev.scale;
    var msg = "ontransformstart " + pziW + " scale " + zoom;
    log(msg);
};
hammer.ontransform …

我试图在iOS中使用Hammer.js(jQuery版本)在水平滚动列表中禁用垂直滚动.我试过这个:

$(document).hammer().on('swipe,drag', 'body',
    function(event)
    {
        if (event.direction == Hammer.DIRECTION_UP || event.direction == Hammer.DIRECTION_DOWN) 
        {
            event.preventDefault();
        }
    }
);

但它不起作用.那么,如何在能够水平滚动的同时垂直禁用滚动？

我正在努力让锤子js事件与骨干一起工作,但无法让它响应事件.我已经尝试了以下..

http://cijug.ne​​t/tech/2013/01/16/backbone-hammer/

https://gist.github.com/kjantzer/4279025

我还在我的视图中放下了一段代码

initialize: function(){
    this.events = _.extend({}, this.defaultEvents, this.events||{});      
}

JS小提琴:http://jsfiddle.net/XcYhD/

码

<div id="swiping"></div>

JS

AppView = Backbone.View.extend({

  el: '#swiping',          

  events: {
    'swipe': 'swipeMe'
  },

  render: function(){             
    this.$el.html('<h2>Swipe Me</h2>');
  },

  swipeMe: function(e){                
    alert('swiped ' + e.direction);
  }

});

var view = new AppView();
view.render(); 

包含的库 - hammer.js,jquery.specialevent.hammer.js等.

无论如何让它工作？

我正在使用hammer.js作为网站的触摸菜单,并获得:

"对象不支持属性或方法'addEventListener'"hammer.js,第247行第13个字符

用IE8.

来自hammer.js的实际代码不起作用:

/**
 * simple addEventListener
 * @param   {HTMLElement}   element
 * @param   {String}        type
 * @param   {Function}      handler
 */
bindDom: function(element, type, handler) {
    var types = type.split(' ');
    for(var t=0; t<types.length; t++) {
        element.addEventListener(types[t], handler, false);
    }
},

知道如何解决这个问题吗？

Jquery曾经有过类似的问题:http: //bugs.jquery.com/ticket/11127

我想通过构建一个简单的程序在屏幕上拖动一个元素来学习Hammer JS,就像在Hammer主页上一样.

我使用了Hammer github页面上发布的代码,它似乎与主页上使用的代码相同.我在Chrome(37.0/OSX)中测试了这项工作.使用它一段时间并且无法移动元素后,我在Safari和FF中打开了相同的页面.它在这两种浏览器中都运行良好.

为了减少事情,我添加了代码所需的代码以查看事件触发器:

var mover = document.getElementById("mover");

var mc = new Hammer.Manager(mover);
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));

mc.on("panstart panmove", function(ev) {
  console.log(ev);
});

Chrome中没有记录任何内容,但我在Safari和FF中按预期正确记录.我扩展了事件监听器,包括'pan,panend,pancancel,panleft,panright,panup,pandown'.这些事件将登录Chrome,因此似乎只有panstart和panmove被忽略了.

因此,此代码将在Chrome的hammer.js页面上运行,因此很明显Chrome确实会在该浏览器中看到panstart和panmove事件,这只是我的代码中没有发生的事情.这意味着我遗漏了一些东西,尽管从他们的网站上复制了代码.我检查过我们使用的是相同的Hammer版本,但我不确定此处还有什么需要检查.

还有其他人遇到并解决了这个问题吗？或者也许知道我在创建这个问题时做错了什么？

谢谢.

我刚刚为我正在建设的网站构建了带有触摸事件的旋转木马滑块.目前正在尝试弄清楚如何激活或禁用(hammer)特定视口上的触摸事件.基本上一旦它到达移动/平板电脑视口.Hammer.js将禁用滑块的禁用点击控件

var activeSlide = 0;
    $('.faculty-carousel').attr('data-slide', '0');
    
    
    
    $('.tile-layout').on('click', function() {
        $('.faculty-items').each(function() {
            $(this).addClass('tile-view');
        })
    })
    
    
    $('.prev').on('click', function(e) {
        event.stopPropagation();
    
        var carouselWrapper     = $(this).closest('.faculty-carousel'),
            facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
            facultyProfileCount = facultyProfilePanel.length,
            viewPortSize        = $(window).width(),
            carousel            = carouselWrapper.find('.faculty-items'),
            position            = 0,
            currentSlide        = parseInt(carouselWrapper.attr('data-slide'));
    
        // Check if data-slide attribute is greater than 0
        if (currentSlide > 0) {
            // Decremement current slide
            currentSlide--;
            // Assign CSS position to clicked slider
            var transformPercentage = -1 * currentSlide / facultyProfileCount * 100; …

更新到 Angular 9 后，无法再使用 Hammer.js。我们对 Angular 进行HammerGestureConfig了如下扩展：

import {HammerGestureConfig} from '@angular/platform-browser';
import {Injectable} from '@angular/core';

@Injectable({providedIn: 'root'})
export class HammerConfig extends HammerGestureConfig {

  overrides = <any>{
    'pan': {
      direction: Hammer.DIRECTION_ALL,
      threshold: 5
    } // override default settings
  };

  buildHammer(element) {
    const recognizers = [];
    if (element.hasAttribute('data-hammer-pan')) {
      recognizers.push([Hammer.Pan]);
    }
    if (element.hasAttribute('data-hammer-pan-x')) {
      recognizers.push([Hammer.Pan, {direction: Hammer.DIRECTION_HORIZONTAL}]);
    }
    if (element.hasAttribute('data-hammer-tap')) {
      recognizers.push([Hammer.Tap]);
    }
    if (element.hasAttribute('data-hammer-pinch')) {
      recognizers.push([Hammer.Pinch]);
    }
    if (element.hasAttribute('data-hammer-rotate')) {
      recognizers.push([Hammer.Rotate]);
    }
    if (element.hasAttribute('data-hammer-press')) {
      recognizers.push([Hammer.Press]);
    }
    if (element.hasAttribute('data-hammer-swipe')) …

我无法在使用 Hammer.JS 的 Angular 应用程序中识别任何手势，例如滑动、平移。它的设置是这样的：

包.json：

"@angular/core": "11.0.5",
"@angular/platform-browser": "~11.0.5",
"@angular/platform-browser-dynamic": "~11.0.5",
"hammerjs": "^2.0.8",
"zone.js": "~0.10.3"

应用程序模块.ts：

import { NgModule } from '@angular/core';
import { BrowserModule, HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';


@NgModule({
  imports:      [ HammerModule, BrowserModule, BrowserAnimationsModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

主要.ts：

import 'hammerjs';

应用程序组件.ts：

onPan(evt) {
    console.log("onPAN");
}

应用程序组件.html：

<div …