觸發內部元素上的單擊事件

Question

需要單擊每個第一個單元格包含鏈接的表格中的一行並打開一個URL。

<table>
  <tr>
    <td><a class="fancybox" href="detail.aspx?CID=67525">LT5C260A436C41</a></td> 
    <td>more data</td>
  </tr>
  <tr>
    <td><a class="fancybox" href="detail.aspx?CID=17522">LA5C260D436C41</a></td> 
    <td>more data</td>
  </tr>
  ...
</table>

完整的行應該是可點擊的，而不是只有鏈接頂部打開fancybox中的詳細信息頁面，即在頁面本身。

所以我試着這樣做：

$("table tr").bind('click',function(e) {
    e.stopPropagation();
    $(this).find("a").trigger('click');
});

但似乎事件正在冒泡，導致：

未捕獲RangeError： 超出最大調用堆棧大小

如何以正確的方式觸發完整行而不是僅僅鏈接的單擊以避免堆棧溢出？

更新：我真的很感謝下面的答案，但我的問題是關於觸發事件，而不是執行該事件內的行為。 解決方法可能很好，但在這種情況下不是。

Answer 1

這很好用：

$("table tr").click(function(e) {
    var $link = $(this).find("a");

    if (e.target === $link[0]) return false;

    $link.trigger('click');
    return false;
});

編輯：

為什么大多數解決方案都不起作用 - 它們會失敗，因為當單擊鏈接時，附加的直接處理程序會運行。 然后該事件冒泡以查看處理程序是否附加到表格單元格，行等。

當你建議觸發點擊時你會導致遞歸：點擊了鏈接→fancybox→bubbles→aha！ 表格行→觸發鏈接點擊→鏈接被點擊...

當您建議停止傳播時，請注意事件停止冒泡到父元素，因此將不會執行附加到body的click處理程序。

為什么上面的代碼有效 - 我們檢查事件是否來自鏈接。 如果是，我們只需返回並停止進一步傳播。

---

查看更新的小提琴： http ： //jsfiddle.net/F5aMb/28/

Answer 2

嘗試

$('table tr').click(function() {
  var href = $(this).find("a").attr("href");
    if(href) {
       window.location = href;
    }
});

Answer 3

試試這個：

 $("table tr a").bind('click', function(e) { e.preventDefault(); window.open($(this).attr('href')); return false; }); $("table tr").bind('click', function(e) { $(this).find("a").trigger('click'); }); 

我發現了什么問題。

在你的代碼中，

 $("table tr").bind('click',function(e) { e.stopPropagation(); $(this).find("a").trigger('click');//This line again triggers a click event binded on the tr ELEMENT which contains the 'a' ELEMENT. So it goes into a infinite loop. }); 

更新：

這樣做。

 $("table tr").bind('click', function(e) { window.location.href = $(this).find("a.fancybox").attr('href'); }); 

$(this).find("a").trigger('click'); 實際上並沒有觸發默認的錨標記行為。 如果單擊事件已明確綁定到該元素，它只會嘗試觸發單擊事件。

Answer 4

可能是我誤解了你的問題，但這不符合你的需要：

$("table tr").click(function(e) {
    e.stopImmediatePropagation();
    if (! $(e.target).is('a')) {
        $(this).find("a").trigger('click');
    }
});

Answer 5

對於本練習的有趣目的，這里是一個純粹的js解決方案，即沒有使用jQ lib）。

可在此處進行測試： http ： //jsfiddle.net/Sr5Vy/3/

<table>
  <tr id="node_1">
    <td><a class="fancybox" href="detail.aspx?CID=67525">LT5C260A436C41</a></td>
    <td>more data</td>
  </tr>
  <tr id="node_2">
    <td><a class="fancybox" href="detail.aspx?CID=17522">LA5C260D436C41</a></td>
    <td>more data</td>
  </tr>
</table>

---

function AddEvent(id, evt_type, ma_fonction, phase) {
  var oElt = document.getElementById(id);
  if( oElt.addEventListener ) {
      oElt.addEventListener(evt_type, ma_fonction, phase);
  } else if( oElt.attachEvent ) {
      oElt.attachEvent('on'+evt_type, ma_fonction);
  }

    // Debug
    // alert('a \'' + evt_type + '\' event has been attached on ' + id );

    return false;
}

function getElementsByRegExpOnId(search_reg, search_element, search_tagName) {
    search_element = (search_element === undefined) ? document : search_element;
    search_tagName= (search_tagName === undefined) ? '*' : search_tagName;
    var id_return = new Array;
    for(var i = 0, i_length = search_element.getElementsByTagName(search_tagName).length; i < i_length; i++) {
        if (search_element.getElementsByTagName(search_tagName).item(i).id &&
        search_element.getElementsByTagName(search_tagName).item(i).id.match(search_reg)) {
            id_return.push(search_element.getElementsByTagName(search_tagName).item(i).id) ;
        }
    }
    return id_return; // array
}

function FollowSpecialLinks(event) {

    // Debug
    // alert('event was successfully attached');

    // Prevent propagation
    event.preventDefault();

    // Identify targetted node (eg one of the children of <tr>)
    var targetted_elt = ShowEventSource(event);
    //alert('Event\'s target : ' + targetted_elt);

    // Extract the targetted url
    if (targetted_elt == "A") {
        var current_link = GetEventSource(event).href;

    } else {
        var current_tr = GetEventSource(event).parentNode;
        var child_links = current_tr.getElementsByTagName('a');
        var current_link = child_links[0].href;
    }



   // Now open the link
    if(current_link) {
        // Debug  
        alert('will now open href : ' + current_link);
       window.location = current_link;
    }


}

function GetEventSource(event) {
    var e = event || window.event;
    var myelt = e.target || e.srcElement;
    return myelt;
}

function ShowEventSource(event) {
    var elmt;
    var event = event || window.event;            // W3C ou MS
    var la_cible = event.target || event.srcElement;
    if (la_cible.nodeType == 3)            // Vs bug Safari
        elmt = la_cible.parentNode;                        
    else
        elmt = la_cible.tagName;
   return elmt;
}

// Get all document <tr> id's and attach the "click" events to them
  my_rows = new Array();
  my_rows = getElementsByRegExpOnId(/^node_.+/, document , 'tr') ;
    if (my_rows) {
        for (i=0; i< my_rows.length; i++ ) {
            var every_row = document.getElementById( my_rows[i] ) ;
            AddEvent(every_row.id, 'click', FollowSpecialLinks, false);
        }
    }

Answer 6

嘗試

$(".fancybox").parent('td').parent('tr').bind('click',function(e) {
    e.stopPropagation();
    $(this).find("a").trigger('click');
});

Answer 7

您是否嘗試在單擊鏈接時停止即時傳播？這樣您應該停止遞歸

$('a').click(function(e){
    e.stopImmediatePropagation();
    alert('hi');
});

在這里小提琴： http ： //jsfiddle.net/3VMGn/2/

Answer 8

為了補償冒泡，您需要檢測事件的目標，而不是多次單擊鏈接。 此外，jQuery的“觸發器”功能不適用於普通鏈接，因此您需要一個專門的點擊功能。

你可以試試看： http ： //jsfiddle.net/F5aMb/27/

$("table tr").each(function(i, tr){
    $(tr).bind('click',function(e) {
        var target = $(e.target);
        if( !target.is("a") ) {
            clickLink($(this).find("a")[0]);
        }
    })
});


function clickLink(element) {
   if (document.createEvent) {
       // dispatch for firefox + others
       var evt = document.createEvent("MouseEvents");
       evt.initEvent("click", true, true ); // event type,bubbling,cancelable
       return !element.dispatchEvent(evt);
   } else {
       //IE
       element.click()
   }
}

Answer 9

我能夠通過為每個鏈接提供唯一ID然后使用jQuery設置該唯一ID的click事件來將窗口重定向到適當的頁面來實現。

這是我的工作示例： http ： //jsfiddle.net/MarkKramer/F5aMb/2/

以下是代碼：

$('#link1').click(function(){
    // do whatever I want here, then redirect
    window.location.href = "detail.aspx?CID=67525";
});
$('#link2').click(function(){
    // do whatever I want here, then redirect
    window.location.href = "detail.aspx?CID=17522";
});

$("table tr").click(function(e) {
    e.stopImmediatePropagation();
    $(this).find("a").trigger('click');
});

Answer 10

您可以使用以下代碼執行所需操作。 我測試了你jsfilddle似乎工作。

$("table tr").click(function(e) {

   // check if click event is on link or not.
   // if it's link, don't stop further propagation
   // so, link href will be followed.

  if($(e.target).attr('class')=='fancybox'){
    alert('you clicked link, so what next ?.');

  // else if click is happened somewhere else than link, 
  // stop the propagation, so that it won't go in recursion.

  }else{
    alert('no link clicked, :( ');
    alert('now clicking link prgrammatically');
    $(this).find('a').click(); 
    e.preventDefault();
  }
});

讓我知道，如果你想要實現別的目的。

Answer 11

我認為.trigger("click") .click()或.trigger("click")只會激活onclick的事件處理程序。

請參閱此處的示例http://jsfiddle.net/sethi/bEDPp/4/ 。 手動點擊鏈接會顯示2個警報，同時通過jQuery觸發事件僅顯示1個警報。

您還可以參考此鏈接： 使用jQuery重新觸發鏈接上的click事件

解

如果你只是想打開一個fancybox試試這個：

$("table tr").bind('click',function(e) {
        var elem = $(e.target);
        if(elem.is('a')){
            return;    
        }
        e.stopImmediatePropagation();
        var parent= elem.is('tr') ? elem:elem.parents("tr").eq(0);
        parent.find("a").trigger('click.fb');
    });

其中click.fb是fancybox與anchor元素綁定的事件。

Answer 12

我的用例是在單擊-element時觸發單擊。 檢查目標元素的類型可以解決遞歸調用問題。

$('#table tbody td').click(function(e){
    if ($(e.target).is('td')) {
        $(this).find('input').trigger('click');
    }
});

Answer 13

$('a.fancybox').click(function(evt){evt.stopPropagation())});

$('table tr:has[.fancybox]').click(function(evt){
$(this).find('.fancybox').trigger('click')
})

Answer 14

我想我有你想要的東西。 您需要做的是在處理程序中的錨標記上調用click() ，並確保忽略錨本身的事件。 此外，WebKit不支持click() ，因此您必須自己實現它。

請注意下面的小提琴，它正確地跟隨鏈接目標，即打開一個新窗口，或加載到同一窗口。 http://jsfiddle.net/mendesjuan/5pv5A/3/

// Some browsers (WebKit) don't support the click method on links
if (!HTMLAnchorElement.prototype.click) {
    HTMLAnchorElement.prototype.click = function() {
      var target = this.getAttribute('target');
      var href = this.getAttribute('href');
      if (!target) {
          window.location = href;
      } else {
          window.open(href, target);
      }          
    }
}

$("table tr").bind('click',function(e) {
    // This prevents the stack overflow
    if (e.target.tagName == 'A') {
        return;
    }
    // This triggers the default behavior of the anchor
    // unlike calling jQuery trigger('click')
    $(this).find("a").get(0).click();
});