2

Como impedir um link de ser aberto ao segurar e arrastar o mouse no Google Chrome?

O script abaixo é para executar ação de scroll ao clicar e arrastar, porém quando se trata de links, ao soltar o botão do mouse o link é aberto, como impedir q ele seja aberto ao arrastar, e abrir o link apenas quando clicar?

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['exports'], factory);
  } else if (typeof exports !== 'undefined') {
    factory(exports);
  } else {
    factory((root.dragscroll = {}));
  }
}(this, function(exports) {
  var _window = window;
  var _document = document;
  var mousemove = 'mousemove';
  var mouseup = 'mouseup';
  var mousedown = 'mousedown';
  var EventListener = 'EventListener';
  var addEventListener = 'add' + EventListener;
  var removeEventListener = 'remove' + EventListener;
  var newScrollX, newScrollY;

  var dragged = [];
  var reset = function(i, el) {
    for (i = 0; i < dragged.length;) {
      el = dragged[i++];
      el = el.container || el;
      el[removeEventListener](mousedown, el.md, 0);
      _window[removeEventListener](mouseup, el.mu, 0);
      _window[removeEventListener](mousemove, el.mm, 0);
    }

    // cloning into array since HTMLCollection is updated dynamically
    dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
    for (i = 0; i < dragged.length;) {
      (function(el, lastClientX, lastClientY, pushed, scroller, cont) {
        (cont = el.container || el)[addEventListener](
          mousedown,
          cont.md = function(e) {
            if (!el.hasAttribute('nochilddrag') ||
              _document.elementFromPoint(
                e.pageX, e.pageY
              ) == cont
            ) {
              pushed = 1;
              lastClientX = e.clientX;
              lastClientY = e.clientY;

              e.preventDefault();
            }
          }, 0
        );

        _window[addEventListener](
          mouseup, cont.mu = function() {
            pushed = 0;
          }, 0
        );

        _window[addEventListener](
          mousemove,
          cont.mm = function(e) {
            if (pushed) {
              (scroller = el.scroller || el).scrollLeft -=
                newScrollX = (-lastClientX + (lastClientX = e.clientX));
              scroller.scrollTop -=
                newScrollY = (-lastClientY + (lastClientY = e.clientY));
              if (el == _document.body) {
                (scroller = _document.documentElement).scrollLeft -= newScrollX;
                scroller.scrollTop -= newScrollY;
              }
            }
          }, 0
        );
      })(dragged[i++]);
    }
  }


  if (_document.readyState == 'complete') {
    reset();
  } else {
    _window[addEventListener]('load', reset, 0);
  }

  exports.reset = reset;
}));
.dragscroll{
  width:400px;
  overflow:scroll;
}
.dragscroll div{
  width:555px;
}
.dragscroll a{
  display:block;
  width:180px;
  height:100px;
  margin-right:5px;
  float:left;
}
.dragscroll::after {
  content: "";
  clear: both;
  display: table;
}
<div class="dragscroll">
<div>
<a href="https://www.example.com" style="background:#333;"></a>
<a href="https://www.example.com" style="background:#ddd;"></a>
<a href="https://www.example.com" style="background:#dd3333;"></a>
</div>
</div>

4 Respostas 4

1

Há uma alternativa usando dois eventos: mousedown e mouseup. Quando o usuário clicar no link e segurar por mais de 100ms, irá alterar a variável flag para true, e ao soltar, disparando o mouseup, irá chamar uma função (libera()) que irá cancelar o evento click do link. Caso o evento click tenha sido cancelado, depois de 100ms novamente irá chamar novamente a mesma função liberando os links para clique.

Ficaria assim:

// variáveis de controle
var flag, tempo;

document.onmouseup = function(){
   if(flag){
      libera(flag);
      setTimeout(function(){
         flag = false;
         libera(flag);
      }, 100)
   }else{
      clearTimeout(tempo);
   }
}

document.onmousedown = function(e){
   var el = e.target;
   // verifica se o que foi clicado é um link <a>
   if(el.tagName == "A"){
      tempo = setTimeout(function(){
         flag = true;
      }, 100);
   }
}

function libera(c){
   var links = document.querySelectorAll(".dragscroll a");
   for(let x = 0; x < links.length; x++){
      links[x].onclick = function(e){
         if(!c) return true; // ação normal do link
         e.preventDefault(); // cancela a ação do link
      }
   }

}


(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['exports'], factory);
  } else if (typeof exports !== 'undefined') {
    factory(exports);
  } else {
    factory((root.dragscroll = {}));
  }
}(this, function(exports) {
  var _window = window;
  var _document = document;
  var mousemove = 'mousemove';
  var mouseup = 'mouseup';
  var mousedown = 'mousedown';
  var EventListener = 'EventListener';
  var addEventListener = 'add' + EventListener;
  var removeEventListener = 'remove' + EventListener;
  var newScrollX, newScrollY;

  var dragged = [];
  var reset = function(i, el) {
    for (i = 0; i < dragged.length;) {
      el = dragged[i++];
      el = el.container || el;
      el[removeEventListener](mousedown, el.md, 0);
      _window[removeEventListener](mouseup, el.mu, 0);
      _window[removeEventListener](mousemove, el.mm, 0);
    }

    // cloning into array since HTMLCollection is updated dynamically
    dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
    for (i = 0; i < dragged.length;) {
      (function(el, lastClientX, lastClientY, pushed, scroller, cont) {
        (cont = el.container || el)[addEventListener](
          mousedown,
          cont.md = function(e) {
            if (!el.hasAttribute('nochilddrag') ||
              _document.elementFromPoint(
                e.pageX, e.pageY
              ) == cont
            ) {
              pushed = 1;
              lastClientX = e.clientX;
              lastClientY = e.clientY;

              e.preventDefault();
            }
          }, 0
        );

        _window[addEventListener](
          mouseup, cont.mu = function() {
            pushed = 0;
          }, 0
        );

        _window[addEventListener](
          mousemove,
          cont.mm = function(e) {
            if (pushed) {
              (scroller = el.scroller || el).scrollLeft -=
                newScrollX = (-lastClientX + (lastClientX = e.clientX));
              scroller.scrollTop -=
                newScrollY = (-lastClientY + (lastClientY = e.clientY));
              if (el == _document.body) {
                (scroller = _document.documentElement).scrollLeft -= newScrollX;
                scroller.scrollTop -= newScrollY;
              }
            }
          }, 0
        );
      })(dragged[i++]);
    }
  }


  if (_document.readyState == 'complete') {
    reset();
  } else {
    _window[addEventListener]('load', reset, 0);
  }

  exports.reset = reset;
}));
.dragscroll{
  width:400px;
  overflow:scroll;
}
.dragscroll div{
  width:555px;
}
.dragscroll a{
  display:block;
  width:180px;
  height:100px;
  margin-right:5px;
  float:left;
}
.dragscroll::after {
  content: "";
  clear: both;
  display: table;
}
<div class="dragscroll">
   <div>
      <a href="https://www.example.com" style="background:#333;"></a>
      <a href="https://www.example.com" style="background:#ddd;"></a>
      <a href="https://www.example.com" style="background:#dd3333;"></a>
   </div>
</div>

2
  • Funcionou perfeitamente com uma modificação, removendo o if(el.tagName == "A"), porque no meu código o el é retornado como li e não o a.
    – Mark
    Commented 26/04/2019 às 18:37
  • Pode ser tb :))
    – Sam
    Commented 26/04/2019 às 18:38
1

Você pode usar o atributo draggable e setá-lo para falso. Isso vai impedir que o link seja arrastável.

<a draggable="false" href="https://pt.stackoverflow.com">Seu link</a>

3
  • Acho que você não entendeu, tente executar o snippet da pergunta e arrastar para entender melhor... Ao clicar pra arrastar e soltar, o link é aberto, esse é o problema, o link não deve ser aberto caso o usuario arraste, ele somente deve ser aberto caso clique.
    – Mark
    Commented 26/04/2019 às 17:44
  • estou usando o google chrome
    – Mark
    Commented 26/04/2019 às 17:45
  • acabei de verificar, esse problema só acontece no chrome
    – Mark
    Commented 26/04/2019 às 17:48
1

Vou ser bem sincero com você, colocar tempo não e tão prazeroso. Você pode usar junção com css, PointerEvents. Ai somente se o usuario realmente não mover o click ficara disponivel. E funciona não somente para links mas outros tambem. obs não importa o tempo, o click só será permitido se o usuario não mover. È assim que o tio google faz se não me engano

let dragscroll = document.querySelector('.dragscroll'),
        div = document.querySelector('.dragscroll div'),
        tagA = document.querySelectorAll('.dragscroll div a'),
        mousedown = false;

    window.addEventListener('mouseup', function () {
        mousedown = false;
        tagA.forEach(e => {
            e.style.pointerEvents = 'visible';
            e.style.cursor = 'pointer';
        });
        div.style.cursor = 'grab';
    }, true);

    div.addEventListener('mousedown', function (e) {
        mousedown = true;
        x = div.offsetLeft - e.clientX;
    }, true);
    
    dragscroll.addEventListener('mousemove', function () {
        if (mousedown) {
            div.style.cursor = 'grabbing';
            tagA.forEach(e => {
                e.style.pointerEvents = 'none';
            });
        };
    }, true);
























(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['exports'], factory);
  } else if (typeof exports !== 'undefined') {
    factory(exports);
  } else {
    factory((root.dragscroll = {}));
  }
}(this, function(exports) {
  var _window = window;
  var _document = document;
  var mousemove = 'mousemove';
  var mouseup = 'mouseup';
  var mousedown = 'mousedown';
  var EventListener = 'EventListener';
  var addEventListener = 'add' + EventListener;
  var removeEventListener = 'remove' + EventListener;
  var newScrollX, newScrollY;

  var dragged = [];
  var reset = function(i, el) {
    for (i = 0; i < dragged.length;) {
      el = dragged[i++];
      el = el.container || el;
      el[removeEventListener](mousedown, el.md, 0);
      _window[removeEventListener](mouseup, el.mu, 0);
      _window[removeEventListener](mousemove, el.mm, 0);
    }

    // cloning into array since HTMLCollection is updated dynamically
    dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
    for (i = 0; i < dragged.length;) {
      (function(el, lastClientX, lastClientY, pushed, scroller, cont) {
        (cont = el.container || el)[addEventListener](
          mousedown,
          cont.md = function(e) {
            if (!el.hasAttribute('nochilddrag') ||
              _document.elementFromPoint(
                e.pageX, e.pageY
              ) == cont
            ) {
              pushed = 1;
              lastClientX = e.clientX;
              lastClientY = e.clientY;

              e.preventDefault();
            }
          }, 0
        );

        _window[addEventListener](
          mouseup, cont.mu = function() {
            pushed = 0;
          }, 0
        );

        _window[addEventListener](
          mousemove,
          cont.mm = function(e) {
            if (pushed) {
              (scroller = el.scroller || el).scrollLeft -=
                newScrollX = (-lastClientX + (lastClientX = e.clientX));
              scroller.scrollTop -=
                newScrollY = (-lastClientY + (lastClientY = e.clientY));
              if (el == _document.body) {
                (scroller = _document.documentElement).scrollLeft -= newScrollX;
                scroller.scrollTop -= newScrollY;
              }
            }
          }, 0
        );
      })(dragged[i++]);
    }
  }


  if (_document.readyState == 'complete') {
    reset();
  } else {
    _window[addEventListener]('load', reset, 0);
  }

  exports.reset = reset;
}));
.dragscroll{
  width:400px;
  overflow:scroll;
  cursor: grab
}
.dragscroll div{
  width:555px;
}
.dragscroll a{
  display:block;
  width:180px;
  height:100px;
  margin-right:5px;
  float:left;
}
.dragscroll::after {
  content: "";
  clear: both;
  display: table;
}
<div class="dragscroll">
<div>
<a href="https://www.example.com" style="background:#181818;"></a>
<a href="https://www.example.com" style="background:#262626;"></a>
<a href="https://www.example.com" style="background:#444444;"></a>
</div>
</div>

-2

Muito simples da para fazer com css puro!

.dragscroll:active section a{
    animation: DesativarLink 2s;
}
@keyframes DesativarLink {
100% {
    pointer-events: none;
}    
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .