2017-05-23 5 views
1

基本的には、x秒間クリックしてからイベントを実行する必要があります。mousedownとmouseupイベントがアンギュラ2で動作しない

アプリでは、1回のクリックでイベントが実行されますが、クリックしても何も押していないとします。

これは下のプランナーが表示されているようにうまくいきますが、アプリで機能しないようです。

<span (mousedown)="mousedown()" (mouseup)="mouseup()" (mouseleave)="mouseup()"> 
    Title 
</span> 

をして適用:

https://plnkr.co/edit/0gBDn0ZfCKXYHJiwq5eQ?p=preview

私も試みていても使用しても

this.elementRef.nativeElement.addEventListener('mousedown',() => { 
setTimeout(() => { 
    console.log('mouse mousedown'); 
}, 500); 
}); 

private elementRef: ElementRef, private renderer: Renderer

this.renderer.listen(this.listener.nativeElement, 'mousedown', (event) => { 
    console.log('mouse down', event); 
    }); 
this.renderer.listen(this.listener.nativeElement, 'mouseup', (event) => { 
     // Do something with 'event' 
     console.log('mouse up', event); 
    }); 

を使用してしかし、私はすべてのメソッドと同じ動作を得る:シングルクリックの作品をが、クリックして、火災の何も保持しません。

角度のCLI V 1.0 角度4.0.0

任意のアイデア?

+0

'それはアプリで働くように見えません'正確にどこですか? – yurzui

+0

私はトップレベルのアプリコンポーネントとルータのアウトレットで試しましたが、機能しません。イベントのある新しいコンポーネントを作成しました。また@ViewChildのリスナーを使用しました – Dezza

答えて

0

イムあなたが何をしたいですが、 - 私は試してみるのかわからない:この変更

:それを保持しながら、

@Component({ 
    selector: 'my-app', 
    template: ` 
    <span> Click and then let go 
    <br/> 
    <p onmousedown="mousedown()" onmouseup="mouseup()">hold to 
start, release to end</p> 
start: {{start}} 
<br/> 
end: {{end}}  
</span> 
<br/> 
<div (click)="clear()">Clear</div> `, 
}) 

今そのラインコントロールが起動し、あなたが離すとリリースが終わりますクリック

basic javascript question: after 5 seconds, set variable to true

EDIT:https://forum.ionicframework.com/t/how-to-detect-long-3-sec-touch-event-in-ionic/15069/2

var didUserHoldForThreeSeconds = 0; 
$scope.hold = function(event) { 
    didUserHoldForThreeSeconds = event.timestamp; 
}; 
$scope.release = function (event) { 
if (event.timestamp - didUserHoldForThreeSeconds > 3000) { 
    console.log('Hooray! They held for 3 seconds') 
} 
    didUserHoldForThreeSeconds = 0; // reset after each release 
}; 

そして

は、それが遅れて、申し訳ありません、のsetTimeout待ち時間を作るための方法は、それがこの例のように、変数を渡すようにすることですガットボタン:

<button class="button" on-hold="hold($event)" on-release="release($event)">My Button</button> 

他のアプローチをとるための少しの

+0

ありがとうございますが、プランナーは期待通りに動作します。イベントが正しく発生しています。それは、アプリ内で使用されても同じことをしません。 – Dezza

+0

は類似したトピックの別の投稿を見つけましたが、これはもっと役に立ちます: https://stackoverflow.com/questions/11144370/using-mousedown-event-on-mobile-without-jquery-mobile –

関連する問題