如果用触摸设备点击锚点我想阻止锚点点击,但是如果用鼠标点击它可以正常操作.

原因是,在桌面上,您将鼠标悬停在锚点上以查看更多信息,然后单击以查看产品.

在手机上,我希望第一次点击显示信息,第二次查看产品.

我已经尝试过以下各种变体:

$('article.product aside a.link').hammer().on('tap', function(ev) {

    if (ev.gesture.pointerType == 'touch') {
        ev.gesture.srcEvent.preventDefault();

        return false;
    }

});

有没有人对此有任何想法？谢谢!

我有一个用户滚动水平滚动区域的UI.

我仍然希望它们能够向左和向右滚动,但我想在同一时间发射Hammer.js pan事件.这是我目前的代码:

var worksHammertime = new Hammer(scrollingArea);
worksHammertime.on('pan', function(ev) {
  if ( ev.direction === 2 ) {
    log('left', ev)
    Do things...
  } else {
    log('right', ev)
    Do things...
  }
});

基本上我认为我正在寻找preventDefault()Hammer似乎默认使用的行为的反面.可以使用hammer.js泛事件并仍然允许用户滚动？

点击FIDDLE

下面是我使用hammer.js创建的功能齐全的全页触摸滑块

你可以drag,swipe或者pan在页面之间切换.

滑块按预期工作,但我现在尝试通过添加两个按钮来创建后备导航,因此也可以在单击时左右分页.

题

点击时如何向左或向右滑动锤子？(Javascript或jQuery).

当前的尝试

$('#Left').on('click', function() {
  HammerCarousel(document.querySelector('.Swiper'), 'Left');
});

完整的代码

function swipe() {
  var reqAnimationFrame = (function () {
    return window[Hammer.prefixed(window, "requestAnimationFrame")] || function (callback) {
      setTimeout(callback, 1000 / 60);
    }
  })();

  function dirProp(direction, hProp, vProp) {
    return (direction & Hammer.DIRECTION_HORIZONTAL) ? hProp : vProp
  }

  function HammerCarousel(container, direction) {
    this.container = container;
    this.direction = direction;
    this.panes = Array.prototype.slice.call(this.container.children, 0);
    this.containerSize = this.container[dirProp(direction, 'offsetWidth', 'offsetHeight')];
    this.currentIndex …

添加 ngx-gallery 时遇到问题。当检查出现 错误时，错误类型错误：如果没有“new”，则无法调用类构造函数 HammerGestureConfig

我在 app.module 中添加了hammerjs 但是还是有问题

这是我的 app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BsDropdownModule, TabsModule } from 'ngx-bootstrap';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routes';
import { AuthGuard } from './_guards/auth.guard';
import { AuthService } from './_services/auth.service';
import { ErrorInterceptorProvider } from './_services/error.interceptor';
import { AlertifyService } from './_services/alertify.service';
import { …

我正在开发这个小网站:网站 ; 我正在使用HammerJS作为触控支持库.

它似乎是响应事件,它识别event.type属性,但当我试图获取事件event.direction或其他相关属性drag时,控制台中没有输出任何内容(我在控制台中记录结果).

这就是我如何倾听这一drag事件"

Application.ApplicationController.prototype.Drag = function(selector, delay, callback) {
    return $(selector).on('drag', _.debounce(function(event){
        event.preventDefault();
        return (typeof callback === 'function' && callback !== undefined) ? callback.apply( event, [ event ] ) : 'Argument : Invalid [ Function Required ]';
    }, delay)); 
};

我称之为:

this.Drag(selector, delay, function(event) {
    console.log(event.type, event.direction);
});

有人能告诉我,我在那里做错了什么,或者我错过了什么？

编辑:我刚刚更换了jQuery库:jquery.specialevents.hammer.js ; 与旧的jquery.hammer.js ; 现在好像它正在响应所有事件,我得到了我应该拥有的所有属性.我仍然想知道为什么不是我努力工作的那个？

编辑:我发现了我的问题的根本原因,我的代码依赖于我正在使用Yepnope脚本加载器异步加载的一些库,所以在某个地方而不是加载所有库(包括hammer.js的jquery插件) ),其中一些丢失了:)我已经修复了这个问题,现在这些事件具有他们应该具有的属性.

我已经成功实现了jQueryUI draggable,但是只要我添加hammer.js代码,拖动代码就不再有效了.

它不是我包括hammer.js,但只要我使用脚本.

为什么是这样？我怎样才能让他们两个都工作？

可拖动和锤子都适用于.dataCard和#main

可拖动的代码在这里工作正常(锤子实现注释掉):http://goo.gl/MO5Pde

以下是可拖动代码的示例:

$('#main').draggable({
    axis:'y',
    revert:true,
    start: function(event, ui){
        topValue = ui.position.top;
    },
    drag: function(event, ui){
            if(pastBreakpoint === false){
                $('#searchInput').blur();
                if(topValue > ui.position.top) return false;
            if(ui.position.top >= 161){
                if(pastBreakpoint === false){
                pastBreakpoint = true;
                    if($('.loadingRefresh').length === 0) $('#main').before('<div class="loadingRefresh"></div>');
                    else{
                    $('.loadingRefresh').remove();
                        $('#main').before('<div class="loadingRefresh"></div>');
                    }
                    $('.loadingRefresh').fadeIn();
                    $('#main').mouseup();
                    setTimeout(function(){
                       location.reload();
                    }, 1000);
                 }
              }
            }   
        }
    });

这是未注释的锤码和可拖动的代码不起作用:http://goo.gl/994pxF

这是锤子代码:

var hammertime = Hammer(document.getElementById('main'), {
    transform_always_block: true,
    transform_min_scale: 0
}); …

我有一个父母和孩子div.平移/拖动孩子不应该影响父母. 这是一个类似的问题,但一年前被问到,我正在使用更新版本的Hammer.js w/jQuery包装器.

我的假设是我必须以某种方式停止传播()但我不确定如何使用它.

我嘲笑了一个演示我在JsFiddle问题的演示.我也评论过我试过的几件事.

$(".outer-box").hammer().bind("panright", function(event){
    // do stuff when panning
    // panning here should move both boxes
});
$(".outer-box").hammer().bind("panend", function(event){
    // do stuff when panning ends
});

$(".inner-box").hammer().bind("panright", function(event){
    // do stuff when panning
    // panning here should only affect the inner box
});
$(".inner-box").hammer().bind("panend", function(event){
    // do stuff when panning ends
});

有什么建议或提示吗？谢谢!

我正在使用Hammer JS库进行小型项目,我在Chrome Dev Tools模拟器上遇到了问题,并在两台iOS 7设备上进行调试.它似乎在桌面浏览器上运行良好.在这里小提琴:http://jsfiddle.net/w80baz5g/5/以及更多信息如下.

我有一组元素,像这样:

<div>
    <img class="item" id="item0" src="http://placehold.it/300x300">
    <img class="item" id="item1" src="http://placehold.it/300x300">
    <img class="item" id="item2" src="http://placehold.it/300x300">
</div>

和锤子JS听轻敲事件:

function initItems(el) {
    var itemToTap = new Hammer.Manager(el, itemOptions);
            itemToTap.add( new Hammer.Tap() );
            itemToTap.on("tap", function(event) { 
                console.log("tapped: " + event.target);
        });

}

$(".item").each(function(){
    var itemToInit = $(this)[0];
    initItems(itemToInit);
});

虽然在桌面浏览器(Chrome,Safari)中一切似乎都很好,但在移动设备上只有三分之一的元素似乎响应了tap事件,但控制台显示它对所有三个元素都有响应？第二和第三个元素根本没有响应.

在这里小提琴:http://jsfiddle.net/w80baz5g/5/

我错过了什么吗？这些事件/元素是否被移动浏览器区别对待？他们为什么不单独响应点击事件？

非常感谢!

我刚刚为我正在建设的网站构建了带有触摸事件的旋转木马滑块.目前正试图找出如何(hammer)使用点击事件禁用触摸事件.这是我一直在研究的代码

该类.slider-layout启用轮播,同时类.tile-layout禁用轮播并在卡视图布局中转换布局

更新#1

我尝试删除绑定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 = …

我正在使用 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 }
    };
}