Запретить два события мыши при изменении HTML - PullRequest
0 голосов
/ 02 ноября 2018

У меня есть функция, которая при выделении мыши или наведении мыши подсвечивает ячейки или в них вносятся изменения.

Все изменения в ячейках работают хорошо, за исключением случаев, когда я пытаюсь очистить текст в промежутке внутри ячейки (.number_searches), используя функции jquery .html .text или .empty. Это приводит к двойному щелчку кода (один для mousedown, другой для наведения мыши)

Есть ли способ очистить диапазон ".number_searches", не вызывая события mousedown и mouseover (2 клика)?

Следующая строка в функции запускаемого клика (.dosearches) вызывает проблему:

area.find('.number_searches').html(" ");

$(function() {
  let isMouseDown = false;
  let hasBeenClicked = false;
  let isHighlighted;
  $("#tablegrid").on('mousedown', 'td.nohighlight', function() {
    isMouseDown = true;
    $(this).toggleClass("highlighted");
    isHighlighted = $(this).hasClass("highlighted");
    if (hasBeenClicked === false) {
      $(this).find('.dosearches').trigger('click');
      hasBeenClicked = true;
    }
    return false; // prevent text selection
  })
  $("#tablegrid").on('mouseover', 'td.nohighlight', function() {
    if (isMouseDown) {
      $(this).toggleClass("highlighted");
      if (hasBeenClicked === false) {
        $(this).find('.dosearches').trigger('click');
        hasBeenClicked = true;
      }
    }
  })
  // May or may not need this part depending on your app design
  $("#tablegrid").on('mouseout', 'td.nohighlight', function() {
    hasBeenClicked = false;
  })
  $("#tablegrid").bind('selectstart', 'td.nohighlight', function() {
    return false;
  })
  $(document).mouseup(function() {
    isMouseDown = false;
    hasBeenClicked = false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="search_juris_cell" class="nohighlight">
      <div class="search_checkbox_section">
        <div class="dosearchescheckbox">
          <input type="checkbox" name="dosearches" class="dosearches">
        </div>
        <span class="number_searches">5 searches</span>
        <div class="search_checkbox_types">
        </div>
      </div>
    </td>
  </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...