标签: touch-event

ios webkit中的touchend事件没有解雇?

我正在尝试为基于ios webkit的应用程序实现一个菜单,用户触摸/点击并按住菜单按钮('.menu_item'),子菜单打开500ms后(div.slide_up_sub_menu),用户应该是能够将他们的手指/鼠标滑动到子菜单项并释放.

    <li class="menu_item">
       ASSET MANAGEMENT
       <div class="slide_up_sub_menu hidden_menu">
         <ul class="submenu">
           <li>Unified Naming Convention</li>
           <li>Version Control</li>
         </ul>
       </div>
    </li>
Run Code Online (Sandbox Code Playgroud)

然后,应用程序应该能够检测touchend/mouseup事件发生在哪个子菜单项上.我将touchstart事件绑定到菜单项,等待500ms,然后告诉子菜单显示.当用户释放他们的手指时,touchend事件应该触发关闭子菜单.如果用户已停止触摸子菜单项,则应检测到该子菜单项.当前检测到鼠标事件发生在哪个子菜单项在桌面上的Safari中工作:

$('ul.submenu li').live('mouseup', function(e){
   console.log($(e.currentTarget)); //works on the desktop
});
Run Code Online (Sandbox Code Playgroud)

但如果我使用touchend处理程序执行相同的操作,它在ipad上不起作用:

$('ul.submenu li').live('touchend', function(e){
   console.log($(e.currentTarget)); //never fires
});
Run Code Online (Sandbox Code Playgroud)

如果我查找每个touchend事件,当我结束对子菜单项的触摸时,我可以获得对父子菜单项的引用:

$(document.body).bind('touchend', function(e) {
    console.log($(e.target).html()); //logs ASSET MANAGEMENT
 });
Run Code Online (Sandbox Code Playgroud)

但没有引用子菜单项.

有没有人知道为什么没有在子菜单项上触发touchend事件?

谢谢

javascript webkit touch-event ios

8
推荐指数
2
解决办法
2万
查看次数

Chrome"模拟触摸事件"无效

我在Chrome的开发人员工具中启用了"模拟触摸事件"选项.我设置了一个简单的测试程序,当我触摸时会发出警报<div>.该程序在我的Galaxy Nexus上工作正常,但是当我点击<div>Chrome时,即使启用了"模拟触摸事件"选项,也没有任何反应.有什么建议?我正确使用此工具吗?

这是我的代码 - 没什么太花哨的.

<!DOCTYPE html>
<html lang="en">
<head>      
    <style type="text/css">
        #main_div
        {
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: red;
            top: 50%;
            left: 20px;             
        }           
    </style>
    <script type="text/javascript">
        function init()
        {
            main_div = document.getElementById("main_div");             
            main_div.ontouchstart = function() 
            {                    
                 alert("here");
            }                               
        }
    </script>
</head>
<body onload="init()">
    <div>
        <p id="x">hello</p>
        <p id="y"></p>
    </div>
    <div id="main_div">
        hello
    </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

mobile google-chrome touch touch-event google-chrome-devtools

8
推荐指数
1
解决办法
3万
查看次数

按下按钮时如何反复做某事?

我正在使用特定的中间件(不重要)在Android中开发一个电视远程模拟器应用程序.

在音量按钮(音量+和音量 - )的情况下,我要做的是在按下按钮时重复发送"音量调高"信号.

这就是我最后尝试的(其中一个按钮的代码,另一个必须相同,除了名称):

  1. 声明了一个布尔变量

    boolean pressedUp = false;
    
    Run Code Online (Sandbox Code Playgroud)
  2. 使用以下AsyncTask声明了一个内部类:

    class SendVolumeUpTask extends AsyncTask<Void, Void, Void> {
    
        @Override
        protected Void doInBackground(Void... arg0) {
            while(pressedUp) {
                SendVolumeUpSignal();
        }
        return null;
    }
    
    Run Code Online (Sandbox Code Playgroud)

    }

  3. 将侦听器添加到按钮:

    final Button buttonVolumeUp = (Button) findViewById(R.id.volup);
    buttonVolumeUp.setOnTouchListener(new View.OnTouchListener() {
    
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
    
            case MotionEvent.ACTION_DOWN:
    
                if(pressedUp == false){
                    pressedUp = true;
                    new SendVolumeUpTask().execute();
                }
    
            case MotionEvent.ACTION_UP:
    
                pressedUp = false;
    
        }
            return true;
        }
    });
    
    Run Code Online (Sandbox Code Playgroud)

我也尝试使用简单的线程,如在Increment-Decrement计数器中按下按钮但不起作用.该应用程序可以很好地用于其余按钮(通道等),但完全忽略了音量变化.

android button ontouchlistener touch-event

8
推荐指数
1
解决办法
4314
查看次数

检测元素是否已停止动量滚动?

是否有可能通过Javascript检测元素是否已停止在Mobile Safari中滚动?

我有一个通过使用动量滚动的元素,-webkit-overflow-scrolling:touch我需要检测元素是否已经停止滚动,包括在动量影响滚动之后.

这可能吗?onscroll在我的应用程序中使用该事件不起作用.

javascript jquery mobile-safari touch-event dom-events

8
推荐指数
2
解决办法
3692
查看次数

可以使用hammer.js泛事件并仍然允许用户滚动?

我有一个用户滚动水平滚动区域的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...
  }
});
Run Code Online (Sandbox Code Playgroud)

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

javascript touch-event hammer.js

8
推荐指数
2
解决办法
3962
查看次数

如何防止ScrollView拦截其背后的点击/触摸事件?

我在FrameLayout中有一个ScrollView和一个ImageView.ImageView位于滚动视图的后面

我的ScrollView有一个透明空间(LinearLayout s_layout_transparent,高度为925px).

所以我的ImageView 可以通过这个透明空间看到,但无法点击.

我试图添加一些值(android:clickable ="false"android:focusable ="android:focusableInTouchMode ="false")滚动视图以防止它拦截ImageView的点击事件,但这根本不起作用.

这是我的布局:

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent">
<LinearLayout
        android:gravity="top|center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingRight="10dp"
        >
    <ImageView
            android:visibility="visible"
            android:id="@+id/s_imgv_splash"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/temp_detail_screen_splash"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"/>
</LinearLayout>
<com.dreambox.android.saven.Views.ScrollView
        android:id="@+id/s_scrollview_event_detail"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbars="none"
        android:visibility="visible"
        android:clickable="false"
        android:focusable="false"
        android:focusableInTouchMode="false"
        >
    <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable="false"
            android:focusableInTouchMode="false"
            android:focusable="false">
        <LinearLayout
                android:id="@+id/s_layout_transparent"
                android:layout_gravity="center_vertical"
                android:layout_width="match_parent"
                android:layout_height="925px"
                android:orientation="horizontal"
                android:background="@color/trasparent"
                android:clickable="false"
                android:focusableInTouchMode="false"
                android:focusable="false">
        </LinearLayout>
        <LinearLayout...>
        <LinearLayout...>
    </LinearLayout>
</com.dreambox.android.saven.Views.ScrollView>
</FrameLayout>
Run Code Online (Sandbox Code Playgroud)

android touch-event android-layout

8
推荐指数
3
解决办法
8274
查看次数

在Swift中将TapGestureRecognizer添加到UILabel

我添加一个UITapGestureRecognizer:tapGesture,我希望当我点击(触摸)标签时,klikPlay()会运行它的动作.

当我运行代码并单击/触摸标签时,它会出现以下错误:

无法识别的选择器发送到实例.

它是关于标签Player(named: label),UITapGestureRecognizer(named:tapGesture)和功能klikPlay

我究竟做错了什么?

 override func didMoveToView(view: SKView) {

let background = SKSpriteNode(imageNamed: "bgStart2")
background.position = CGPoint(x:0, y:0)
background.anchorPoint=CGPoint(x:0,y:1.0)
background.size = frame.size
addChild(background)


//label Play
var label: UILabel = UILabel()
label.frame = CGRectMake(frame.size.width/4, frame.size.height/9, frame.size.width, frame.size.height/6)
label.text = "Play"
label.font = UIFont(name: "Noteworthy-Bold", size:50)
label.textColor = UIColor.whiteColor()
label.textAlignment = NSTextAlignment.Center
label.center = CGPointMake(frame.size.width/2, 4 * frame.size.height/8 )
label.hidden = false

//label map
var label2: UILabel = UILabel()
label2.frame = …
Run Code Online (Sandbox Code Playgroud)

uilabel touch-event swift

8
推荐指数
3
解决办法
3万
查看次数

计算旋转速度并自然旋转视图iOS

我有一个圆形的视图,并通过以下代码覆盖touchesBegan(touches:, withEvent:)和旋转touchesMoved(touches:, withEvent:).

var deltaAngle = CGFloat(0)
var startTransform: CGAffineTransform?

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?)
{
    let touchPoint = touches.first!.locationInView(view)

    let dx = touchPoint.x - view.center.x
    let dy = touchPoint.y - view.center.y

    deltaAngle = atan2(dy, dx)
    startTransform = arrowPickerView.transform
}

override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?)
{
    let touchPoint = touches.first!.locationInView(view)

    let dx = touchPoint.x - view.center.x
    let dy = touchPoint.y - view.center.y
    let angle = atan2(dy, dx)
    let angleDifference = deltaAngle - …
Run Code Online (Sandbox Code Playgroud)

trigonometry transform touch-event ios swift

8
推荐指数
1
解决办法
1217
查看次数

将Android NestedScrollView水平滑动传递给父视图

我正在尝试制作一个左右可刷卡系统(如Tinder),卡上有一个NestedScrollView.目标是如果用户仅向上和向下滑动,NestedScrollView将滚动,但如果用户向左或向右滑动,则卡将使用该滑动.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="4dp"
    card_view:cardUseCompatPadding="true">

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="4dp">

            <TextView
                android:id="@+id/text_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

</android.support.v7.widget.CardView>
Run Code Online (Sandbox Code Playgroud)

(我使用的卡库是https://github.com/wenchaojiang/AndroidSwipeableCardStack)

compile 'com.github.wenchaojiang:AndroidSwipeableCardStack:0.1.5'
Run Code Online (Sandbox Code Playgroud)

当我在NestedScrollView上放置margin_top并在该边距内触摸时,CardStack正确地抓取我的输入并且卡片向左或向右移动,但是如果我触摸并拖动其他任何地方,NestedScrollView会抓住我的输入而不管方向.

我应该扩展/覆盖哪个类/ onTouchEvent以产生这种效果,或者可能有更简单的方法?

谢谢!

android android-custom-view ontouchlistener touch-event android-nestedscrollview

8
推荐指数
1
解决办法
892
查看次数

`e:TouchEvent`的`@ HostListener`导致Firefox崩溃,"ReferenceError:未定义TouchEvent".

使用@HostListener显式键入的事件参数TouchEvent,会导致Firefox崩溃,并显示以下错误消息:

ReferenceError:未定义TouchEvent.

一个例子:

@HostListener('touchstart', ['$event']) // or 'touchend', 'touchmove'
onTouchStart(e: TouchEvent): void {}
Run Code Online (Sandbox Code Playgroud)

我可以想出几种方法来自行预防:

  • 使用e: TouchEvent | anye: any(或根本不指定类型)
  • 使用 elRef.nativeElement.addEventListener('touchstart', (e: TouchEvent) => {})
  • 使用 Observable.fromEvent(elRef.nativeElement, 'touchstart').subscribe((e: TouchEvent) => {})

但是使用any| any看起来像是一个黑客,而另外两个选项没有利用框架.是否有另一种更好,更安全的方法来处理这个问题,如果没有,哪种选择更可取?

(也许有人也可以解释Angular实际在做什么以及为什么只有当事件被明确地输入为TouchEvent... 时才会发生此错误)


编辑:这个问题仍然存在于Angular 7中.编辑:这个问题在Angular 6中已得到明确解决.

firefox touch-event angular

8
推荐指数
1
解决办法
589
查看次数