Блог

Главная - Вопросы по программированию - Почему событие щелчка предотвращается с помощью нескольких событий мыши?

Почему событие щелчка предотвращается с помощью нескольких событий мыши?

#javascript #jquery #d3.js

Вопрос:

У меня есть гистограмма с этими событиями:

  1. mouseenter и mouseleave это я использую для вычисления общего времени, в течение которого курсор находился в SVG
  2. mouseover , mousemove , mouseleave для всплывающей подсказки, которая создается для каждого прямоугольника.

У меня есть 3 переключателя, которые я использую для отображения разных SVG (поэтому change я удаляю текущую SVG и создаю новую). Теперь проблема в том, что я думаю, что между этими событиями есть противоречие. Иногда я не могу нажать на переключатель, но все остальное работает нормально. Почему событие щелчка предотвращается? У меня их несколько SVG на моей странице, и я применяю одно и то же. Может ли быть в этом проблема? Ссылка на мой рабочий код: введите описание ссылки здесь

Я пробовал использовать d3.event.stopPropagation(); , но мне кажется, что я размещаю его в неправильном месте. Вот где я это помещаю:

   let mouseover = function() {
    tooltip.style("opacity", 1)
    d3.event.stopPropagation();
  }
  let mousemove = function(d) {
    tooltip
      .html(d.key   " speak  "   d.data[d.key]  "%")
      .style("left", (d3.mouse(this)[0] 70)   "px")
      .style("top", (d3.mouse(this)[1])   "px")
  }
  let mouseleave = function(d) {
    tooltip.style("opacity", 0)

  }

таким образом, проблема застревания кнопки щелчка возникает только в том случае, если я наведу курсор на прямоугольники, щелчок работает плавно, если я не наведу курсор.

Комментарии:

1. Вы уверены, что проблемы возникают из-за обработки событий? Для меня это больше похоже на проблему с загрузкой данных через d3.csv() , где время от времени появляется ошибка 500 внутренних серверов .

2. Мое предположение, что проблема в обработчике событий, потому что, когда я прокомментировал движение мыши, возникла проблема( т. Е. Внутренняя ошибка 500 и проблема с обработкой событий).

Метки: