Question

我在我的网络应用程序上使用hammer.js手势功能。我用它来刷一个视频元素，它按预期工作完美。但是，当我将以下代码应用于图像元素时，它无法正常工作。

App.Views.Photo = Backbone.View.extend({
template  : template('photoTemplate'),
className : 'photo',
parent    : null,

events: {
    'swipe' : 'swiped',
    // 'pan'    : 'dragged'
},

...

swiped: function(e) {

    this.remove();
    this.parent.newContent(this.model);
},

这个完全相同的代码适用于视频元素，但不适用于图像。我也试过在刷过的函数中做e.gesture.preventDefault();但是也没有用。我现在正在firefox上测试应用程序。

任何帮助将不胜感激。

由于

[编辑]：我按照以下方式初始化锤子代码

render: function() {

    $(this.el).attr('id', this.model.attributes._id);
    this.$el.html( this.template( this.model.toJSON() ) );

    this.$el.hammer();

    return this;
},

Answer 1

好的，所以在对这个问题敲了几个星期后我终于得到了答案。

在initialize函数中我放置了以下代码

$('img').on('dragstart', function(event) { event.preventDefault(); });

所以看起来像这样

initialize: function(opts) {
    this.render();
    this.parent = opts.parent;

    $('img').on('dragstart', function(event) { event.preventDefault(); });
},

这样做是因为它可以防止图像像默认一样被拖动而且可以解决问题。

现在在swipe，图像会被删除，就像我想要的那样。

[编辑] 如果页面上有多个图像，请将this添加到事件中，如

this.$('img').on('dragstart', function(event) { event.preventDefault(); });

这将适用于使用该视图渲染的所有图片。

Answer 2

您可以使用：

<img draggable="false"...

或者像这样的CSS（可能并非所有浏览器都支持，尤其是IE）

pointer-events: none;

Hammer.js：滑动事件不能处理图像

2 个答案: