Re：スクロールバーのクリックが伝播しないようにする

Question

残念ながらスクロール可能なdivがあります。divのonMouseDownに関連付けられたイベントもあります。

私の問題は、スクロールバーをクリックしてスクロールしたいとき、それらのイベントが発生するということです。

スクロールバーのマウスイベントが伝播するのを防ぐための方法はありますか？

function myFunction(event, element) { 
    // Your code for div 
    // ... 

    if (event.stopPropagation) { 
     event.stopPropagation(); 
    } else { 
     event.cancelBubble = true; 
    } 
} 

をそして、あなたのdivがこのようなものでなければなりません：

Answer 1

。とにかく私の知る限りではありません。あなたはスクロールバーをクリックすると、カーソルの座標

---

が、その場合にはあなただけを返すことができ、あなたの要素の幅に等しい：

しかし、1 半まともな解決策がありますイベントハンドラがその処理を行えないようにします。

ここでは、Chrome.v.58/MacOSのスクロールバーの幅を考慮して、ロジックに余分な7ピクセルを追加しました。スクロールバーの幅はブラウザによって決まります。そのため、値に若干の調整が必要な場合があります。

class MyApp extends React.Component { 
 

 
    divMouseDown(e) { 
 
    if((e.clientX + 7) >= e.target.clientWidth) return; 
 
    console.log("do stuff on click"); 
 
    } 
 
    render() { 
 
    return (
 
     <div id="my-div" onMouseDown={this.divMouseDown}> 
 
     <p>foo</p> 
 
     <p>bar</p> 
 
     <p>baz</p> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<MyApp />, document.getElementById("myApp"));

#my-div { 
 
    background: beige; 
 
    height: 60px; 
 
    overflow: auto; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="myApp"></div>

Answer 2

その後、あなたれるonmousedown機能でこれを入れてこれを行う方法があるようには思えない

<div onmousedown="myFunction(event, this);">Click me!</div>