2017-08-04 10 views
11

私は大規模なdivを持っています。サイズを変更しようとしている間に、iEとEdgeで意図していなかったとしても、ページ全体が青色で選択されています。私はWeb上に表示された多くのソリューションを試しましたが、何も働かなかった。以下は私のコードです。私はマウス移動のイベントによるデフォルトアクションを防ぐことができません。私はマウス移動イベントのownerDocumentをリッスンしています。コードの下evt.preventDefaultは、マウス移動イベントのIEとEdgeでは動作しません。さらにevt.returnValue = falseを試しました。伝播を止めることはできませんでした。

ChromeとMozillaの

に期待どおりに動作しているストップ伝播が停止伝播は、デフォルトはfalseです防ぐ後デフォルトは、真である防ぐ前に私は、EVTの変数に検査することで、コンソールに見てきました。問題は、ページがで選択されることをである場合

if (event.preventDefault){ 
    event.preventDefault(); 
} 
else { 
    event.returnValue = false; 
} 

答えて

5

を代わりにevt.preventDefaultを作るの();マウス移動で自身が

private MouseDown(evt: any) { 
     this.viewState.resizing = true; 
     const {ownerDocument} = ReactDOM.findDOMNode(this); 
     evt.preventDefault(); 
     evt.stopPropagation(); 
     ownerDocument.addEventListener('mousemove', this.MouseMove); 
     ownerDocument.addEventListener('mouseup', this.MouseUp); 

     this.setState(this.viewState); 
    } 
1

はこのパターンを試してみてください:

は、コードを反応させるの

ページ全体が選択なっている理由グーグルクロームの動作と同じですが、まだを取得いけません青色では、選択を防止する別のアプローチがあります。

これを試してみてください:

<body onselectstart="return false"> 
+0

didntの仕事、私はまた、マウスの移動機能 – Labeo

2

<div className="resizer" 
     tabIndex={-1} 
     onMouseDown={this.MouseDown} 
/> 


private MouseDown(evt: any) { 
     this.viewState.resizing = true; 
     const {ownerDocument} = ReactDOM.findDOMNode(this); 
     ownerDocument.addEventListener('mousemove', this.MouseMove); 
     ownerDocument.addEventListener('mouseup', this.MouseUp); 

     this.setState(this.viewState); 
    } 

private MouseMove(evt) { 
     this.viewState.width = width; 
     this.viewState.height = height; 


     if (evt.preventDefault) { 
      evt.returnValue = false; 
      evt.preventDefault(); 
     } 
     else { 
      evt.cancelBubble = true; 
     } 


     this.setState(this.viewState); 
    } 
+0

に偽の復帰を追加したイベントをクリック/マウスダウンでそれを作るしかし、我々は完全にその機能を削除傾けます。ここでは、div要素のサイズを変更するときにのみ、その機能を防止したいと考えています。 – Labeo

+0

あなたは 'addEventListener'と' removeEventListener'を使ってこのアプローチを試みましたか? 'onDragStart'や' onMouseDown'イベントや 'onDragEnd'や' onMouseUp'のようなインタラクションが終了したときの他のイベントがあると思います。試してみることのできるもう1つの方法は、GreenSockのドラッグ可能ツールhttps://greensock.com/draggableです – Rodrigo

関連する問題