Почему срабатывает событие Click при загрузке страницы?

Question

[nikitoshq]

Есть такой код html:

<div class="click_number_header" onclick="ga('send', 'event', 'click_number_header', 'click', 'Click number header');">
    057-098-28
    <span class="num_hide">-52</span>
    <span class="sh_nmr">показать</span>
</div>

И JS:

jQuery(document).ready(function($){
  $.fn.textToggle = function(cls, str) {
    return this.each(function(i) {
      $(this).click(function() {
        var c = 0, el = $(cls).eq(i), arr = [str,el.text()];
        return function() {
          el.text(arr[c++ % arr.length]);
        }
      }());
    })
  };
  $(function(){
    $('.sh_nmr').textToggle(".sh_nmr","").click();
    $('.sh_nmr').textToggle(".num_hide","ХХХ").click();
  });
});

Суть кода состоит в том, чтобы при загрузки страницы скрывать часть номера, для того чтобы отслеживать количество кликов по номеру телефона в гугл аналитике. Код скрывает номер отлично, но почему-то событие onclick в блоке срабатывает тоже при загрузки страницы.

<div class="click_number_header" onclick="ga('send', 'event', 'click_number_header', 'click', 'Click number header');">

Что может быть не так?

Comments

[Maxim Kirshin]

передаешь результат функции, надо передавать не результат, а саму функцию
так по идее будет работать

onclick="function() { return ga('send', 'event', 'click_number_header', 'click', 'Click number header');}"

[nikitoshq]

Maxim Kirshin, к сожалению, сейчас вообще не передает событие.

Answer 1

[Loli E1ON]

Вы снизу кликаете на спаны, вот событие и всплывает к вашему онклику

$('.sh_nmr').textToggle(".sh_nmr","").click();
$('.sh_nmr').textToggle(".num_hide","ХХХ").click();

Вы можете навешать событие клика вручную, уже после кликов по спану

$('.click_number_header').on("click" , () => ga('send', 'event', 'click_number_header', 'click', 'Click number header'));

Comments

[nikitoshq]

Я в принципе догадывался об этом, но все равно не пойму как можно решить данную задачу по другому. Может посоветуете?

[Loli E1ON]

nikitoshq, обновил ответ, уберите атрибут onclick в диве и добавьте его через js, после того как кликали на спаны

[nikitoshq]

Loli E1ON, Сделал точь в точь. Все равно почему-то срабатывает.

<div class="click_number_header">003-078-88<span class="num_hide">-85</span> <span class="sh_nmr" style = "font-size: 60%;  text-decoration: underline;">показать</span></div>

jQuery(document).ready(function($){
  $.fn.textToggle = function(cls, str) {
    return this.each(function(i) {
      $(this).click(function() {
        var c = 0, el = $(cls).eq(i), arr = [str,el.text()];
        return function() {
          el.text(arr[c++ % arr.length]);
        }
      }());
    })
  };
  $(function(){
    $('.sh_nmr').textToggle(".sh_nmr","").click();
    $('.sh_nmr').textToggle(".num_hide","ХХХ").click();
  });
  $('.click_number_header').on("click" , () => ga('send', 'event', 'click_number_header321', 'click', 'Click number header'));
});

[Loli E1ON]

nikitoshq, я не уверен, но попробуйте так:

$(function(){
    $('.sh_nmr').textToggle(".sh_nmr","").click();
    $('.sh_nmr').textToggle(".num_hide","ХХХ").click();
    $('.click_number_header').on("click" , () => ga('send', 'event', 'click_number_header321', 'click', 'Click number header'));
  });

[Loli E1ON]

должно работать

[nikitoshq]

Loli E1ON,

jQuery(document).ready(function($){
  $.fn.textToggle = function(cls, str) {
    return this.each(function(i) {
      $(this).click(function() {
        var c = 0, el = $(cls).eq(i), arr = [str,el.text()];
        return function() {
          el.text(arr[c++ % arr.length]);
        }
      }());
    })
  };
  $(function(){
    $('.sh_nmr').textToggle(".sh_nmr","").click(function(e){e.stopPropagation();}).click();
    $('.sh_nmr').textToggle(".num_hide","ХХХ").click(function(e){e.stopPropagation();}).click();
    $('.click_number_header').on("click" , () => ga('send', 'event', 'click_telephone3', 'click', 'Click number header'));
  });
});

<div class="click_number_header" >093-078-24<span class="num_hide">-55</span> <span class="sh_nmr" style = "font-size: 60%;  text-decoration: underline;">показать</span></div>

Сделал так, но отправляет почему-то после полного отображенеи номера, то есть только на 2-ой клик

[Loli E1ON]

nikitoshq,

[nikitoshq]

Loli E1ON, Ура! Сработало! Это моя ошибка была, я зачем-то добавил stopPropagation на клики, не понятно чем оно мешало. Но когда полностью скопировал Ваш пример, все заработало! Спасибо больше)

Answer 2

[coderisimo]

Не совсем понимаю логику , но :
1) а зачем делать "автоклики" при загрузке страницы? Почему просто не вызвать нужную ф-цию ?
2) если уж так надо именно "автокликать" , используйте stopPropagation , чтобы "yellow submarine" не всплывала ))