Question

我有一个“显示链接”，单击该链接会显示一个包含其他链接的隐藏

。

这些链接恰好显示在“显示链接”的确切坐标处。

单击“显示链接”时，会触发其事件，但下面的链接也会被触发。

当我单击“显示链接”时如何停止单击新显示的链接？

编辑：我正在提供代码，但可能会使问题复杂化。 setTapClickAction是为了避免使用.on（“ touchstart click”）

时出现的双击行为

内嵌脚本：

    ...
    let $m = $('<a href="#"/>').text('Show Link');
    $.setTapClickAction($m, function (el, e) {
      $('li.location').fadeIn( 1000);
      $(el).text("Show All").attr("href","https://example.com")
    });
    $('<p id="more-locations"/>').html($m).insertAfter(list);
    ...

main.js：

  // function to set the tap or click action on an element.
  // suggested usage:
  // $.setTapClickAction('.subscription_show_button', function(){
  //   $modalElement.modal('show');
  // });
  $.setTapClickAction = function (selector, actionFunction){
    if (typeof actionFunction !== 'function' ){
      console.log('No Action Function given. Function tapClickButton');
      return false;
    }
    let $obj;
    if (typeof selector === 'string'){
      $obj = $(selector);
    } else if (selector instanceof $) {
      $obj = selector;
    } else {
      console.log('No element for action: ' + selector);
      return false;
    }
    let touchmoved;
    $obj.on('click',function(e){
      actionFunction($(this), e);
      console.log("click fired by " + this);
    }).on('touchend',function (e) {
      if (touchmoved !== true) {
        actionFunction($(this), e);
      }
    }).on('touchstart', function () {
      $(this).off('click');
      touchmoved = false;
      console.log("touchstart fired by " + this);
    }).on('touchmove', function () {
      touchmoved = true;
    });
  };

edit2：

这里是生产站点的链接。 https://t.starstarmobile.com/5/SESSIONIDB10/quick2?phone=8887186545单击或点击“查找附近的其他中心”

Answer 1

所以我对这个问题的答案是在没有href值的任何链接上使用.preventDefault（）。我还添加了名称空间，以便可以多次修改事件。

    // function to set the tap or click action on an element.
    // suggested usage:
    // $.setTapClickAction('.subscription_show_button', function(){
    //   $subscriptionModal.modal('show');
    // });
    $.setTapClickAction = function (selector, actionFunction) {
      let $obj, touchmoved, hasHref;
      let namespace = "";
      if (typeof actionFunction !== 'function') {
        console.log('No Action Function given. Function tapClickButton');
        return false;
      }
      if (typeof selector === 'string') {
        $obj = $(selector);
        //set the name space
        namespace = selector.charAt(0) !== '.' ? '.' + selector : selector;
        // console.log("string selector", selector);
      } else if (selector instanceof $) {
        $obj = selector;
        // console.log("jquery Instance", selector);
      } else {
        console.log('No element for action:', selector);
        return false;
      }
      //look for valid href or exec e.preventDefault
      let href = $obj.attr("href");
      if (href !== '#' && href !== undefined) {
        hasHref = true;
        // console.log ("Href: " + href)
      }
      //remove previously set events
      $obj.off('click' + namespace);
      $obj.off('touchstart' + namespace);
      $obj.off('touchend' + namespace);
      $obj.off('touchmove' + namespace);

      //set events
      // console.log('namespace: '+ namespace);
      $obj.on('click' + namespace, function (e) {
        if (!hasHref) {
          e.preventDefault();
        }
        actionFunction($(this), e);
        // console.log("click fired by ", this);
      }).on('touchend' + namespace, function (e) {
        if (touchmoved !== true) {
          actionFunction($(this), e);
        }
      }).on('touchstart' + namespace, function (e) {
        if (!hasHref) {
          e.preventDefault();
        }
        $(this).off('click' + namespace);
        touchmoved = false;
        // console.log("touchstart fired by:", this, e.currentTarget.getAttribute("href"));
      }).on('touchmove' + namespace, function () {
        touchmoved = true;
      });
    };

如何防止点击刚刚显示的元素

1 个答案: