标签: touchmove

这是针对“客户签名”组件的反应。touchmove 事件不会在 Android 版 Google Chrome 浏览器上触发。我使用的是三星 Galax 平板电脑 a (2016)。我通过 USB 控制台将平板电脑连接到我的电脑。

在我的 componentDidMount 中，我获取画布引用、2d 上下文等，并为画布元素设置事件侦听器：

componentDidMount(){
   let canvas = this.refs.canvas;
   let ctx = canvas.getContext("2d");
   // ...
   canvas.addEventListener('touchmove ', (e) => { console.log("touchMove: ", e); });
}

在我的渲染中，我有画布： render(){ }

该事件永远不会触发。我已在 touchstart 上设置了 e.preventDefault；触摸画布区域内部时页面不会滚动。触摸画布内部并移动手指不会执行任何操作。

我还有其他有效的事件，所以我认为这与画布参考没有任何关系。

document.addEventListener('keydown', this.keyPress);
canvas.addEventListener('mousemove', this.mouseMove); // works
canvas.addEventListener('touchmove ', (e) => { console.log("touchMove E: ", e); }); // does not work
canvas.addEventListener("mousedown", this.mouseDown); // works
canvas.addEventListener("mouseup", this.mouseUp); // works
canvas.addEventListener("touchstart", this.touchStart); // works
canvas.addEventListener("touchend", …

我有一个简单的例子，用户开始在触摸屏上滚动，然后一秒钟后，我想禁用滚动。我认为 event.preventDefault() 会停止滚动，但在滚动开始后它似乎不起作用

这是一个例子：https : //jsfiddle.net/7s5m8c6L/30/

let allowScroll=true;

function TS(e){//touchstart handler
  setTimeout(function(){
    allowScroll=false;
  },1000)
}

function TM(e){//touchmove handler
  if(!allowScroll){
    e.preventDefault();
  }
}

在这个例子中，你可以开始滚动，一秒钟后，我希望滚动停止，但它没有。我知道有很多方法可以让它与 CSS 一起工作（添加溢出：隐藏），但我特别想知道为什么 preventDefault 不起作用。

我正在使用COCOS2D为iPhone开发游戏.

在那里,当用户将手指从一个点拖到另一个点时,我需要绘制一条线.据我所知,我需要Touches Moved method从中获得积分.

但我不知道该怎么做.有人可以帮我这个吗？

当我尝试touchmove在这个jsbin演示中检查事件时,它只在Chrome和Opera for Android中触发一次,之后立即触发touchcancel事件,而不是继续触发touchmove事件？

基于W3C规范以及touchmoveFirefox for Android和Android默认浏览器中事件的行为,在我看来触摸事件应该起作用的方式是touchmove事件在触摸仍然在触摸时保持触发页.尝试在这个jsbin中测试之后,我得到了以下日志消息:

touchstart event; starting on (140,197) on the screen, or (381,536) on the page.
touchend event; starting on (undefined,undefined) on the screen, or (undefined,undefined) on the page.
touchstart event; starting on (181,137) on the screen, or (492,372) on the page.
touchmove event; starting on (182,153) on the screen, or (495,416) on the page.
touchcancel event; starting on …

我正在执行一项任务，其中涉及拖动图像并检查其放置位置，如果放置在正确的位置则执行操作。虽然它在任何有鼠标的设备上都可以正常工作，但在触摸屏上却不起作用。如何在触摸屏上实现这一目标。使用 Vuejs 2 或 vanilla javascript

拖动项目

<v-row v-for="(item, iterator) in Activity.drag_items" :key="item.class" :class="[item.class, item.status]" class="drag-item">
   <v-img 
      draggable
      @dragstart='startDrag($event, item, iterator)'
      :src="require(`@/assets/img/activities/activity_2/${item.item_img}`)"
      contain
      :class="item.status"
   ></v-img>
</v-row>

掉落物品

<a @drop='onDrop($event, Activity)' @dragover.prevent @dragenter.prevent></a>

拖动功能

startDrag(evt, item, index){
        evt.dataTransfer.dropEffect = 'move';
        evt.dataTransfer.effectAllowed = 'move';
        evt.dataTransfer.setData('item', JSON.stringify(item));
        evt.dataTransfer.setData('index', index);
    }

掉落功能

onDrop(evt, galaxy_location) {}

我使用此代码禁用和启用触摸:

jQuery(document).ready(function(){

 jQuery("body").on("touchmove", false);

 jQuery('button').click(function(){
     jQuery("body").on("touchmove", true);
 });

});

功能工作正常,用于禁用触摸,但点击按钮触摸后无法启用.

什么代码错了？

所以基本上我希望能够在有人在iOS或Android支持的触控设备的屏幕上滑动时获得触摸的坐标.

到目前为止我尝试做的事情如下.

$('element').bind("touchmove", function(e) {
    $(element2).html(e.pageX + "," + e.pageY);
}

加上我尝试了同样的"vmousemove"(jquery mobile等价物或它应该是),"mousemove"但无济于事.我只得到初始和结束触摸的坐标.

提前致谢

所以我想测量用户在html5画布上滑动的速度和方向？

似乎应该有一些已经写好的东西,所以我不必重新发明轮子,但我找不到任何东西.有人知道JavaScript函数吗？

如果我必须自己做,我在想这个:

• 抓住触摸事件x&y,将它们存储在数组变量中
• 计算2点之间的斜率(如果斜率不同,可以计算平均值)
• 不确定如何测量速度,也许是点之间的距离？

还有其他想法吗？

这是我的画布和我的形状,它听取触摸事件.触摸我的iphone或iphone模拟器时,我通常会收到1或2个事件.我看到了坐标.我正在使用kineticjs进行舞台和造型.

要尝试一下,请转到iPhone中的此网址,然后将手指放在圆圈上并将其推到某处.(或者,如果你有ios模拟器,你也可以使用它)

这是我的小提琴:http: //jsfiddle.net/jnylund/uRgZZ/16/

   function writeMessage(messageLayer, message) {
   var context = messageLayer.getContext();
   messageLayer.clear();
   context.font = '18pt Calibri';
   context.fillStyle = 'black';
   context.fillText(message, 10, 25);
   var div = document.getElementById('tevents');
   div.innerHTML = div.innerHTML + message + "<BR/>";

}

var stage = new Kinetic.Stage({
   container: 'container',
   width: 460,
   height: 320
});

var layer = new Kinetic.Layer();
var messageLayer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
   x: stage.getWidth() / 2,
   y: stage.getHeight() / 2,
   radius: …

我有一个网格,我想模仿在这个链接中创建的绘图功能, 事情是该代码上的功能不适用于移动设备.

如果我touchmove在控制台中通过的方块,我设法获得了id .由于某种原因,我不能改变方形背景颜色我touchmove通过.

这是我用来更改背景颜色的代码:

         var elementTouching = document.elementFromPoint( 
               distx, //x coordinate
               disty  //y coordinate
            );
    console.log(elementTouching.id); // check that the id does appear in the console


//i think that the problem is in the next row
    $(elementTouching.id).css({"background-color":"blue"}); 

这是整个代码:

CSS

.b{
    width: 50px; 
    height: 50px; 
    display: inline-block;
    border: red 1px solid;
}

HTML

<div id="demo"></div>
<h3 id="statusdiv">Status x</h3>
<h3 id="statusdiv1">Status y</h3>

JS

                            createLoop();
            $('.b').bind('touchstart', StartDragSelect);
            $('.b').bind('touchstart', successA);



        function createLoop() {
            var length = 5; …

这是一个简单的问题.有没有办法在jQuery或Javascript中确定touchmove事件的速度？我使用css来抓取元素并让它可以抓取,这样可以正常但是如果我更快地移动手指,我不太可能移动到阈值距离但我确实打算翻页,所以有没有办法我可以确定javascript或jQuery中触摸移动事件的移动速度,我可以将阈值调整为较小的值以补偿速度？

    var startX, endX, difference, threshold; 
var startTime, endTime, timeDiff = 151;
$('#animate')
.bind("touchstart", function (e){ 
    e.preventDefault();
    var d = new Date();      
    startTime = d.getTime();
    startX = e.originalEvent.touches[0].pageX; //starting point
    })
.bind("touchmove", function (e){
    e.preventDefault();
    endX =e.originalEvent.changedTouches[0].pageX; //Get the information for finger 
    difference = startX - endX;  //calculate the distance moved.
    var moved = minusScreen - difference; //determine the affected css value.
    $(this).css("left",moved);  //this makes the element moves with my finger.
    })
.bind("touchend", function (e) { 
    var date = new …

我在一个页面上有 2 个滑块，我想同步它们。我找到了一种在点击外部控件时同步的解决方案，但如何在左右滑动时触发？

http://jsfiddle.net/vgJ9X/1/

<!-- slider 1 -->
<ul class="bxslider">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
</ul>

<!-- slider 2 -->    
<ul class="bxslider">
    <li>Slide 4</li>
    <li>Slide 5</li>
    <li>Slide 6</li>
</ul>

<!-- custom controls -->
<div class="bxslider-controls">
  <a class="pull-left" href="#">PREV</a>
  <a class="pull-right" href="#">NEXT</a>
</div>

JS

var slider_array = new Array();

$(document).ready(function ($) {

// launch bxslider
$('.bxslider').each(function (i) {
    slider_array[i] = $(this).bxSlider({
        controls: false
    });
});


// bind controls on custom controls, and run functions on every slider
$('.bxslider-controls a').bind('click', function …