javascript - 如何在 jquery 插件中停止传播()？ (更新)

Question

(I had to rewrite the whole question in order to clarify it, some older answers may not match the content entirely)

我在这里创建了两个 fiddle 来演示这个问题。

当您点击表格行时，将显示一个警报。

但是，单击“更多”按钮时不应显示此警报。

工作示例已正确说明 here

然而，当我使用此功能创建插件时，stopPropagation() 不再起作用，当我单击“更多”按钮时仍然会显示警报，如图所示 here

插件:

$.fn.shorten = function(settings) {

   var config = $.extend( {
     showChars : 100,
     ellipsesText : "...",
     moreText : "more",
     lessText : "less"
    }, settings);

$(document).off('click', '.morelink').on('click', '.morelink', function(e){ 
    e.preventDefault(); 
    e.stopPropagation();    

  var $this = $(this);

  // Toggle del nombre del link
  if ($this.hasClass('less')) { // clic en more para mostrar less

    $this.removeClass('less');
    $this.html(config.moreText);

    // muestro shorcontent y escondo allcontent
    $this.parent().prev().prev().show(); // shortcontent
    $this.parent().prev().hide(); // allcontent

  } else { // click en less para mostrar more

    $this.addClass('less');
    $this.html(config.lessText);

    $this.parent().prev().prev().hide(); // shortcontent
    $this.parent().prev().show(); // allcontent
  }

  return false;
});

return this.each(function() {
  var $this = $(this);

  var content = $this.html();
  if (content.length > config.showChars) {
    var c = content.substr(0, config.showChars);
    if (c.indexOf('<') >= 0) // If there's HTML don't want to cut it
    {
      var inTag = false; // I'm in a tag?
      var bag = ''; // Put the characters to be shown here
      var countChars = 0; // Current bag size
      var openTags = []; // Stack for opened tags, so I can close them later

      for (i=0; i<content.length; i++)
      {
        if (content[i] == '<' && !inTag)
        {
          inTag = true;

          // This could be "tag" or "/tag"
          tagName = content.substring(i+1, content.indexOf('>', i));

          // If its a closing tag
          if (tagName[0] == '/')
          {
            if (tagName != '/'+openTags[0]) console.log('ERROR en HTML: el tope del stack debe ser la tag que cierra');
            else
              openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
          }
          else
          {
            // There are some nasty tags that don't have a close tag like <br/>
            if (tagName.toLowerCase() != 'br')
              openTags.unshift( tagName );// Agrega al inicio el nombre de la tag que abre
          }
        }
        if (inTag && content[i] == '>')
        {
          inTag = false;
        }

        if (inTag) bag += content[i]; // Add tag name chars to the result
        else
        {
          if (countChars < config.showChars)
          {
            bag += content[i];
            countChars ++;
          }
          else // Ya tengo los caracteres necesarios
          {
            if (openTags.length > 0) // Tengo tags sin cerrar
            {
              console.log('Quedaron tags abiertas');
              console.log(openTags);
              for (j=0; j<openTags.length; j++)
              {
                console.log('Cierro tag '+ openTags[j]);
                bag += '</'+ openTags[j] +'>'; // Cierro todas las tags que quedaron abiertas

                // You could shift the tag from the stack to check if you end with an empty stack, that means you have closed all open tags
              }
              break;
            }
          }
        }
      }
      c = bag;
    }

    var html = '<span class="shortcontent">' + c + '&nbsp;' + config.ellipsesText +
               '</span><span class="allcontent">' + content +
               '</span>&nbsp;&nbsp;<span><a href="javascript:void(0)" class="morelink badge">' + config.moreText + '</a></span>';

    $this.html(html);
    $(".allcontent").hide(); // Esconde el contenido completo para todos los textos
  }
});

};

Answer 1

您不仅可以使用return false;，还可以使用JavaScript:void(0)。

Check here for the difference between the two.

尽管 stopPropogation() 和 preventDefault() 不同，return false 执行两者。

最后 .live() 被折旧，我们 on() 代替:http://api.jquery.com/on/

---

你可以试试:

$('body').on('click', '.morelink', function(e) {
      e.preventDefault();
      ...
}

---

这是一个棘手的临时更改，可以让它按您想要的方式工作，直到您找到更永久的解决方案。嘿，它甚至可能是一个 jQuery 错误，我不知道。无论哪种方式，这都允许点击 td 来执行警报，而点击下拉菜单(更多/更少)则不会。

$(document).ready(function() {

    $('#tab_open_deals tbody tr td').off('click').on('click', function(e) {
    var $target = $(e.target);
    if($target.is(".morelink"))
    {
        // You clicked the morelink. Do nothing.
    }
    else
    {
        // Do your stuff!       
    }

});