Athanor

Например, так

const a = 99;
const b = a.toString();
console.log(b[0])

Это происходит потому что событие click вешается не на сами кнопки табов, а на весь блок с табами, включая его контент.

Быстрый способ справиться с проблемой — если таб не выбран, выходить из функции переключения таба DEMO

Правильный способ — обрабатывать событие click исключительно на кнопках табов, тогда переключение табов будет работать только тогда, когда нужно.

На самом деле, возможно получится обойтись и без canvas, например так

А вот инструмент для удобного построения такой карты

В библиотеке lodash есть хороший метод cloneDeep, это именно то, что вам нужно. Подключить lodash будет проще и правильней, чем изобретать велосипед, тем более treeshaking хорошо все ненужное в случае с lodash уберет.

Инкапсуляция нужна для защиты какой-то внутренней логики от случайного/намеренного изменения, которое может вызвать внутренние проблемы. Я думаю, вас просто сам пример смутил. Представьте себе, что внутри конструктора User был бы еще метод, в котором идет расчет на то, что age соответствует условию. Например, метод, который высчитывает год рождения пользователя. Соответственно, если кто-то не аккуратно записал в age что-то кроме number, этот метод вернет нам какой-то неожиданный результат(например, NaN).

Скорее всего, чтоб осуществить задуманное вам стоит воспользоваться комбинацией событий touchStart и touchEnd. Будет выглядеть это как-то так:

$(document).ready(function() {
  if ($(".swiper-container1").length > 0) {
    var startMoveEvent;
    var swiper = new Swiper(".swiper-container1", {
      slidesPerView: 8,
      loop: true,
      autoplay: {
        delay: 0,
        disableOnInteraction: false
      },
      speed: 7000
    });
    swiper.on("touchStart", event => {
      startMoveEvent = event;
    });
    swiper.on("touchEnd", event => {
      var sliderMovedToLeft = event.offsetX - startMoveEvent.offsetX < 0;
      console.log("sliderMovedToLeft", sliderMovedToLeft);
    });
  }
}

DEMO

На самом деле, без кода сложно что-то сказать, но судя по этим строкам:

либо мышкой нажать на другой участок сайта, тогда идет поиск

Видимо поиск у вас срабатывает по событию 'blur' для вашего инпута.
Здесь есть пример.
Все что вам нужно — после выбора значения в поле найти ваш input и от него вызвать метод `blur`.

Это быстрое решение и в архитектурном плане, конечно, лучше так не делать, т.к. это получится довольно не очевидно. Лучшим вариантом было бы удалить вызов поиска на enter и blur и сделать поиск на выбор в автокомплите.

Родителя не получается найти, т.к элемент удаляется раньше, чем происходит обработка клика, чтоб исправить это на ум приходит множество костылей, но я бы предложил не писать велосипедов, а использовать проверенные готовые решения типа https://github.com/Pomax/react-onclickoutside

Ваш код с использованием библиотеки:
https://codesandbox.io/embed/suspicious-grass-6h3m...