0

У меня есть таблица в ней много строчек, при клике на поле tr колесиком мыши я получаю значения атрибута data-id и по нему отправляю пользователя на некую ссылку в новой вкладке браузера, вроде все ок


let btnKeys = document.querySelectorAll('table.table.person_table tbody tr');
for (var i = 0; i < btnKeys.length; i++)
{
  btnKeys[i].addEventListener('mouseup', function(event)
  {
    if(event.which == 2)
    {
        window.open('/person/' + this.getAttribute('data-id'), '_blank');
    }
  });
}

Но хочу отметить что когда мы кликнули колесиком мыши курсор становиться будто активным и страница скролиться туда сюда за мышкой.

введите сюда описание изображения

Как от этого избавиться?) preventDefault не помогает)

2
  • Может попробовать эмулировать отжатие колесика(типа повтоный щелчек вызвать)?
    – SwaD
    7 дек 2022 в 13:49
  • @SwaD двойное срабатывание клика будет - говнокод, придется делать счетчик и проверять его значение 7 дек 2022 в 14:23

2 ответа 2

0

Если повесить обработчик события с помощью onmousedown и return false, то это сработает. А почему - я не знаю) Если опытные коллеги подскажут - буду благодарен.

document.querySelector('.block1').addEventListener('mousedown', function(event){
  if (event.which == 2)
    return false;
});

document.querySelector('.block2').onmousedown = function(event){
  if (event.which == 2)
    return false;
};
.test {
  display: flex;
  width: 100%;
}
.block {
  flex: 0 0 50%;
  height: 500px;
}
.block1 {
  background-color: orange;
}
.block2 {
  background-color: green;
}
<div class="test">
  <div class="block block1">Scroll on</div>
  <div class="block block2">Scroll off</div>
</div>

1
  • Как я понимаю mousedown срабатывает в момент нажатия кнопки на мышке, а вот mouseup уже после, так что после того как событие сработало, предотвращать будет нечего. (Точно также как со scroll, событие срабатывает после прокрутки, так что мы его не можем предотвратить)
    – ΝNL993
    7 дек 2022 в 20:09
0

Нормально preventDefault() помогает

document.querySelector('table').addEventListener('mousedown',(event) => {
  if (event.buttons === 4) {
    event.preventDefault();
    let id = event.target.closest('tr').dataset.id;
    console.log(id);
    
    // window.open('url'+id,'_self')
    // или
    // window.location.href = 'url'+id
  }
})
table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
  padding: 7px;
}
<table>
  <tbody>
    <tr data-id='1'><td>первый</td></tr>
    <tr data-id='2'><td>второй</td></tr>
    <tr data-id='3'><td>третий</td></tr>
  </tbody>
</table>

3
  • window.open('/person/' + id, '_blank'); добавляю открытие ссылки, но в текущем скрипте открытие происходит в новой вкладке и эта станица становиться активной. Пытался использовать blur но не помогает
    – lidovsci
    8 дек 2022 в 3:21
  • mousedown делает всегда активное нажатие, я так понял в фоне нельзя будет открыть ссылку, а mouseup уже как раз в фоне открывает.
    – lidovsci
    8 дек 2022 в 4:07
  • @lidovsci вопрос был про то, что при нажатии на колёсико мыши появлялся скроллинг. Я дал вам рабочий вариант, чтобы и скролл не появлялся и id можно было получить. Вы сейчас задаёте вопрос относительно другой проблемы. Я обновил ответ, добавив в коде комментарии по поводу открытия ссылки на той же вкладке 8 дек 2022 в 7:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.