ムウエ田、マウスアップイベントは角度2で働いていません -- angular フィールド と angular-cli フィールド と dom-events フィールド 関連 問題

mousedown and mouseup events not working in angular 2












1
vote

問題

日本語

X秒の場合はクリックして保留する必要があり、イベントを実行します。

アプリ内でイベントが実行されたときに実行されますが、クリックしてそれらのどれも持っていないときは?

これは下のプランカーが表示されているのでうまく機能しますが、アプリで働くように思われることはできません。

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

私は試してみました:

<事前> <コード> <span (mousedown)="mousedown()" (mouseup)="mouseup()" (mouseleave)="mouseup()"> Title </span>

と適用:

<事前> <コード> 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

任意のアイデア?

英語

I need to do a click and hold for x seconds then run an event.

In the app the events run if I do a single click but, when I click and hold none of them fire?

This works fine as the plunker below shows, but can't seem to get it working in the app.

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

I have also tried:

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

and applying:

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

also even using

private elementRef: ElementRef, private renderer: Renderer

and using

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);     }); 

But I get the same behaviour with all methods: single click works but click and hold fires nothing.

angular cli v 1.0
angular 4.0.0

Any ideas?

</div
        
 
 

回答リスト

1
 
vote

imあなたが欲しいものがわからないが、私は試してみるよ:

これを変更する:

<事前> <コード> items.filter(item => item.toLowerCase().startsWith(props.filterText.toLowerCase())) 0

クリックしている間に回線コントロールが起動し、クリックを解除すると終了します。

遅くなった、申し訳ありませんが、この例のように、SetTimeout Waitを渡す方法は、

基本JavaScriptの質問:5秒後、セット真

に変数

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

<事前> <コード> items.filter(item => item.toLowerCase().startsWith(props.filterText.toLowerCase())) 1

とボタン:

<事前> <コード> items.filter(item => item.toLowerCase().startsWith(props.filterText.toLowerCase())) 2

これが他のアプローチを作るのにほとんど役立つことを願っています

 

Im not sure of what do you want, but I´ll give a try:

Modifying this:

@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>  `, }) 

Now that line controls start while holding it, and releases end when you release the click.

Got it late, sorry, the way to make SetTimeout wait is to make it pass a variable, like in this examples:

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 }; 

And the button:

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

Hope this helps a little to make other approach

</div
 
 
   
   

関連する質問

23  キープレスイベントの後にテキストカーソル位置を取得する方法  ( How to get text cursor position after keypress event happened ) 
構文蛍光ペンを書いています。蛍光ペンはテキストを入力して矢印キーをナビゲートしながらすぐに強調表示を更新する必要があります。 私が直面している問題は、「KeyPress」イベントが発生したときに、<コード> window.getSelection() を介して...

0  onclickイベントオブジェクトを引用符で囲みます  ( Onclick event with object as parameter in quotes ) 
Googleマップと場所APIの操作APIは、関数 generateinfowindow(場所)。の関数によって生成される各マーカーのinfoWindowsをレンダリングしています。 そこには、Googleマップマーカコンテンツ属性に渡される文字列 html...

26  IFRAMEを超えるとMouseMoveを検出しますか?  ( Detect mousemove when over an iframe ) 
ウィンドウ全体を占めるIFRAME(100%、100%高)、マウスが移動したときにメインウィンドウが必要です。 はすでにiframeの onMouseMove 属性を試してみましたが、明らかに機能しませんでした。 DIVのIFRAMEをそのように折り返してみま...

1  一般的なブラウザによる一般共同閲覧アプローチ  ( General co browsing approach with common browsers ) 
未修正の標準的なWebブラウザの共同ブラウジングを実装するための解決策(接続されているブラウザ間で同期されている)を探しています。 PostMessage 。 しかし、私はブラウザ間で同期されるべきであるサイトにコードを入れる必要なしにそれをすることを好むで...

1  要素を隠すためのEventListener  ( Eventlistener for hiding an element ) 
要素の表示がなしに設定されているときにトリガされるJavaScriptイベントを見つけようとしています。 <コード> std::vector<string> MakeFileVector(string filename){ //Get the input fr...

0  フラッシュステージが焦点を当てています  ( Flash stage losing focus ) 
私はこの信じられないほど華麗なスクロールサムネイル画像ビューアーをフラッシュActionScript 3で作成しました.3。(基本的にはマウスの位置によっては上下にスクロールするだけです)。それはそうするように動作します(私はそれが最も画像の上部の画像を示すよ...

2  Chrome拡張子を使用してFacebookのテキストを置き換える  ( Replace text in facebook create post field using chrome extension ) 
Google入力ツールのようなChrome Extensionプロジェクトを操作しています。入力しながら、英語の文字を別の言語に置き換えます。 それはすべての入力、TextArea、コンテンツ編集可能なdiv、およびiframesでうまく機能します Bl...

33  AndroidのWebKitにはどのDOMイベントがありますか?  ( What dom events are available to webkit on android ) 
Androidユーザーを対象としたモバイルWebアプリを構築しています。私はDOMイベントが私に利用可能なのか知る必要があります。私は次の作業をすることができましたが、非常に確実にはありません: をクリックします マウスオーバー MouseDown ...

0  Googleマップv3:Ajax - >データベース - > infowindow - >エラー  ( Google maps v3 ajax database infowindow error ) 
私はほとんどそれを得ました。ほとんど。 データベースからInfoWindowsにデータベースからデータベースをajaxにしようとしている後......データベース内の最後のエントリを除くすべてのマーカーは常に未定義になる。 これは fiddle 。 なぜ私は1...

0  AddeventListenerリスナー関数をTypesScriptで渡す方法は?  ( How to pass arguments to addeventlistener listener function with typescript ) 
状況は多少のようなものです: <コード> const searchKeyPressHandler = (appDispatch: any, e: any) => { if (e.keyCode === 27) { appDispatc...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有