我正在尝试为基于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事件?
谢谢
我在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
我正在使用特定的中间件(不重要)在Android中开发一个电视远程模拟器应用程序.
在音量按钮(音量+和音量 - )的情况下,我要做的是在按下按钮时重复发送"音量调高"信号.
这就是我最后尝试的(其中一个按钮的代码,另一个必须相同,除了名称):
声明了一个布尔变量
boolean pressedUp = false;
Run Code Online (Sandbox Code Playgroud)使用以下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)
}
将侦听器添加到按钮:
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计数器中按下按钮但不起作用.该应用程序可以很好地用于其余按钮(通道等),但完全忽略了音量变化.
是否有可能通过Javascript检测元素是否已停止在Mobile Safari中滚动?
我有一个通过使用动量滚动的元素,-webkit-overflow-scrolling:touch
我需要检测元素是否已经停止滚动,包括在动量影响滚动之后.
这可能吗?onscroll
在我的应用程序中使用该事件不起作用.
我有一个用户滚动水平滚动区域的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泛事件并仍然允许用户滚动?
我在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) 我添加一个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) 我有一个圆形的视图,并通过以下代码覆盖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) 我正在尝试制作一个左右可刷卡系统(如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
使用@HostListener
显式键入的事件参数TouchEvent
,会导致Firefox崩溃,并显示以下错误消息:
ReferenceError:未定义TouchEvent.
一个例子:
@HostListener('touchstart', ['$event']) // or 'touchend', 'touchmove'
onTouchStart(e: TouchEvent): void {}
Run Code Online (Sandbox Code Playgroud)
我可以想出几种方法来自行预防:
e: TouchEvent | any
或e: any
(或根本不指定类型)elRef.nativeElement.addEventListener('touchstart', (e: TouchEvent) => {})
Observable.fromEvent(elRef.nativeElement, 'touchstart').subscribe((e: TouchEvent) => {})
但是使用any
或| any
看起来像是一个黑客,而另外两个选项没有利用框架.是否有另一种更好,更安全的方法来处理这个问题,如果没有,哪种选择更可取?
(也许有人也可以解释Angular实际在做什么以及为什么只有当事件被明确地输入为TouchEvent
... 时才会发生此错误)
编辑:这个问题仍然存在于Angular 7中.编辑:这个问题在Angular 6中已得到明确解决.
touch-event ×10
android ×3
javascript ×3
ios ×2
swift ×2
angular ×1
button ×1
dom-events ×1
firefox ×1
hammer.js ×1
jquery ×1
mobile ×1
touch ×1
transform ×1
trigonometry ×1
uilabel ×1
webkit ×1