Блог

В моем приложении есть несколько карточек для отображения разных деталей. Теперь есть две кнопки (влево / вправо) для прокрутки карточек. Для обычного просмотра (safari, firefox, chrome) на рабочем столе / ноутбуке эти левые / правые кнопки видны при наведении курсора мыши на эти карты. Внутри этих карточек все ссылки / гиперссылки отлично работают на рабочем столе / ноутбуке.

Но, когда я проверяю это же приложение в ipad, нам пришлось дважды щелкнуть по любой ссылке на этих картах. Потому что при первом щелчке эти кнопки отображаются, а затем при втором щелчке эти ссылки указывают правильный путь. Я хочу отключить этот эффект наведения и изначально показать весла.

вот фрагмент кода моего шаблона

 <div
          v-show="grid"
          class="second-row"
          @mouseover="showPaddle"
          @scroll.passive="setScrolledLeft"
        >
          <Paddles
            :margin-top="secondRowHeight/2"
            :showRightPaddle="showRightPaddle"
            :showLeftPaddle="showLeftPaddle"
            @scroll-cards="scrollCards"
          /> ..... </div>
 

Теперь я пытаюсь проверить сенсорные устройства, удалить эффект наведения на кнопки и отобразить их.

способ отображения весел

     // checking the device is touch or non-touch
   isTouchDevice() {
    if ('ontouchstart' in window ||
       (window.DocumentTouch amp;amp; document instanceof window.DocumentTouch) ||
       (navigator.maxTouchPoints > 0 || window.navigator.msMaxTouchPoints > 0)
    ) {
        return true;
      }
        return window.matchMedia( "(pointer: coarse)" ).matches;
    },
    showPaddle() {
      const secondRowEl = this.$el.querySelector('.second-row');
      const gridWidth = this.$el.querySelector('.grid').clientWidth; // to scroll cards
      const scrollMax = gridWidth - secondRowEl.clientWidth;
      if (gridWidth > secondRowEl.clientWidth) {
        if (secondRowEl.scrollLeft > 0 amp;amp; secondRowEl.scrollLeft < scrollMax) {
          this.showLeftPaddle = true;
          this.showRightPaddle = true;
          if(window.innerWidth < 768) {
          if(this.isTouchDevice) {
            try {
              for (let sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI-=1) {
                const sheet = document.styleSheets[sheetI];
                if (sheet.cssRules) {
                  for (let ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI-=1) {
                    const rule = sheet.cssRules[ruleI];
                    if (rule.selectorText) {
                      if (sheet.rules[ruleI].selectorText.match(':hover')) {
                        sheet.deleteRule(ruleI);
                      }
                    }
                  }
                }
              }
            } catch(e) {
              Logger.error(e);
            }
          }
        }
        } else if (secondRowEl.scrollLeft >= scrollMax) {
          this.showLeftPaddle = true;
          this.showRightPaddle = false;
        } else if (secondRowEl.scrollLeft <= 0) {
          this.showLeftPaddle = false;
          this.showRightPaddle = true;
        }
      } else {
        this.showLeftPaddle = false;
        this.showRightPaddle = false;
      }
      if (!this.secondRowHeight) {
        this.secondRowHeight = secondRowEl.offsetHeight;
      }
    }
 

Как мне решить эту проблему с наведением курсора мыши и нормально отображать весла?