Mam div, który jest przewijany niestety mam też wydarzenie związane z Onmousedown na Div.

Mój problem polega na tym, że kiedy chcę przewijać, klikając na przewijanie paska, które wydarzenia są następnie wystrzelone.

Czy istnieje sposób, aby to zrobić, abyś mógł zapobiec imprezie myszy na paskom przewijania od propagowania?

3
noisegrrrl 27 czerwiec 2017, 11:55

3 odpowiedzi

Najlepsza odpowiedź

Wydaje się, że nie ma sposobu, aby to zrobić; I tak nie do mojej wiedzy.

Jednak istnieje rozwiązanie w połowie przyzwoitości :


Jeśli klikniesz na paski przewijania, współrzędne kursora są równe szerokości swojego elementu, w którym to przypadku możesz powrócić i zapobiec wykonywaniu tego materiału.

Tutaj dodałem dodatkowe 7 pikseli do logiki, aby uwzględnić szerokość paska przewijania na Chrome.v.58 / MacOS. Szerokość paska przewijania jest określana przez przeglądarkę, dzięki czemu wartość może potrzebować lekkiego ulepszenia.

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>
4
Chris 27 czerwiec 2017, 09:18

Następnie umieść to w funkcji Onmousedown:

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

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

A twój div powinien być taki:

<div onmousedown="myFunction(event, this);">Click me!</div>
0
Blarzek 27 czerwiec 2017, 09:17

Miałem ten sam problem. Miałem element div, z innym przewijanym div w nim. Chciałem wydarzenia Onclick na ogień zarówno na zewnątrz, jak i wewnątrz Div, ale nie na pasku przewijania.

Problem polega na tym, że paski przewijania również dostaje Mousedown.

Czyste rozwiązanie, aby zapobiec mousedownowi na pasku przewijania jest utworzenie div, który zawiera przewijaną zawartość wewnątrz Div, który zawiera pasek przewijania. Następnie wyłączamy naszą funkcję Onmousedown, gdy cel jest div z paska przewijania. Może jest wyraźniejszy z przykładem:

document.onmousedown = function(e){
  if(e.target.id != 'scroll'){
    console.log('mousedown');
  }
}
#outside {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: green;
}

#scroll {
  position: relative;
  top: 10px;
  left: 10px;
  background-color: red;
  width: 280px;
  height: 100px;
  overflow-y: scroll;
}
<div id='outside'>
    <div id='scroll'>
      <div id='container'>
        foo<br>
        bar<br>
        eee<br>
        foo<br>
        bar<br>
        eee<br>
        foo<br>
        bar<br>
        eee<br>
      </div>
    </div>
  </div>

Rozwiązanie działa, ponieważ "przewijanie" Div zawiera pasek przewijania, ale "kontener" div nie (widać to naprawdę dobrze, jeśli sprawdzasz element). Jedynym czasem bezpośredniego celu zdarzenia Mousedown jest "przewijanie" DIV, gdy klikamy na paski przewijania. Wszelkie kliknięcia na paski przewijania są zatrzymane, ale wszystko inne wyzwala wydarzenie.

Mam nadzieję że to pomoże.

2
user3267727 21 czerwiec 2019, 19:52