添加跟蹤事件並單擊對象的事件偵聽器？

Question

我有一個捕獲事件的事件偵聽器，但我也想捕獲哪個項目被點擊。這是我的代碼：

$(document).ready(function() { 
    function shareEventHandler(evt) { 
     if (evt.type === 'addthis.menu.share') { 
      //alert(typeof (evt.data)); // evt.data is an object hash containing all event data 
      //alert(evt.data.service); 
      if (evt.data.service === "tweet") { 

       if (blogCollection !== null) { 
        if (blogCollection.length) { 
         var result = $.grep(blogCollection, function (item) { return evt.data.url.indexOf(item.BlogUrl) > -1 }); 
         var newArr = []; 
         if (result.length == 0) { 
          // no item 
          return; 
         } else { 
          var item = result[0]; 
          alert(item.BlogTitle); 
         } 

        } 
       } 

       xt_click(this, 'C', item.BlogXtn2 + ', [' + item.BlogParentTitle + ']::[add_this]::[tweet]::[' + item.BlogTitle + ']', 'A'); 
      } 
     } 
    } 
    addthis.addEventListener('addthis.menu.share', shareEventHandler); 
}); 

我想通過this到shareEventHandler（），這樣我可以得到的屬性和被點擊的按鈕前頁的父對象，但我不知道如何將它傳遞進入功能。

---

編輯：整個文件

addthis.init(); 
var blogCollection; 
var pageURL = location.protocol + '//' + location.host + location.pathname; 
var nameOfActiveClass = "blogCategoryActive"; 
var category = getUrlVars()["category"]; 
if (category == "" || category === undefined) { 
    category = "All"; 
} 

// Retrieve blogId value 
if ($(".blog-wrapper").length > 0) { 
    var blogId = $(".blog-wrapper").attr("data-blogid"); 
    var blogCount = $(".blog-wrapper").attr("data-blogcount"); 
} 

// Populate the Blog Header navigation 
getHeaderBlogNavigation(blogId); 

// This flag controls whether to show the View more button or not 
var showViewMoreFlag = true; 

// Getting the correct start index 
var start = getUrlVars()["start"]; 
if (start == "" || start == undefined) { 
    start = 0; 
} 
if (isNaN(start)) { 
    start = start.replace(/\D/g, ''); 
} 

// Getting the correct end index 
var end = getUrlVars()["end"]; 
if (end == "" || end == undefined) { 
    end = blogCount; 
} 
/*if (isNaN(end)) { 
    end = end.replace(/\D/g, ''); 
}*/ 

// Popluates the initial Blog post on page load 
generateBlogPosts(category, start, blogCount, blogId); 

if (!showViewMoreFlag) { 
    $('.blog-more-posts').hide(); 
} else { 
    $('.blog-more-posts').show(); 
} 

// This function Populates the Blog Category Navigation 
function getHeaderBlogNavigation(blogId) { 
    var end = getUrlVars()["end"]; 
    if (end == "" || end == undefined) { 
     end = blogCount; 
    } 
    if (category.toLowerCase() === "all") 
    { 
     $("#Blog-Category-Navigation").append("<li class='selected " + nameOfActiveClass + "'><a class='selected " + nameOfActiveClass + "' href='" + pageURL + "?category=All&start=0&end=" + end + "'>All</a></li>"); 
    } else { 
     $("#Blog-Category-Navigation").append("<li><a href='" + pageURL + "?category=All&start=0&end=" + end + "'>All</a></li>"); 
    } 

    var data = "{blogId:'" + blogId + "'}"; 

    $.ajax({ 
     type: "POST", 
     url: "/WebServices/BackedByBayer/Blog/BlogCategoryList.asmx/CategoryList", 
     async: false, 
     data: data, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (response) { 
      var categoryCollection = response.d; 
      //alert("success lis"); 
      if (categoryCollection.length) { 
       for (var i = 0; i < categoryCollection.length; i++) { 
        $("#Blog-Category-Navigation").append(getHeaderNavigationHTML(categoryCollection[i], blogId)); 
       } 
      } 
     }, 
     error: function(res) {} 
    }); 
} 

function getHeaderNavigationHTML(categoryName, blogId) { 
    var catName = category.replace(/\s/g, ''); 
    var catNameFromSc = categoryName.replace(/\s/g, ''); 
    var anchorTag = "<a class='selected " + nameOfActiveClass + "' onclick='getBlogByCategory(this,\"" + blogId + "\");' href='javascript:void(0);'>" + categoryName + "</a>"; 
    if (catName == catNameFromSc) { 
     return "<li class='" + nameOfActiveClass + "'>" + anchorTag + "</li>"; 
    } 
    return "<li>" + anchorTag + "</li>"; 
} 


function generateBlogPosts(categoryString, startIndex, endIndex, blogId) { 
    // Increased endIndex by 1 to check if there are more items to display 

    var count = parseInt(endIndex) + 1; 
    var data = "{filterName:'" + categoryString + "', startIndex:" + startIndex + ", count: " + count + ", blogId: '" + blogId + "'}"; 
    $.ajax({ 
     type: "POST", 
     url: "/WebServices/BackedByBayer/Blog/FetchBlogPost.asmx/BlogList", 
     async: false, 
     data: data, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (response) { 
      blogCollection = response.d; 
      if (blogCollection !== null) { 
       if (blogCollection.length) { 
        var numberOfBlogPosts = blogCollection.length; 
        if (numberOfBlogPosts == count) { 
         numberOfBlogPosts = numberOfBlogPosts-1; 
         showViewMoreFlag = true; 
        } else { 
         showViewMoreFlag = false; 
        } 
        for (var i = 0; i < numberOfBlogPosts; i++) { 
         var item = blogCollection[i]; 
         $("#Blog-Posts").append(GetBlogHTML(item, i)); 
        } 
        reinitiateAddThis(); 

       } 
       else { 
        showViewMoreFlag = false; 
       } 
      } else { 
       showViewMoreFlag = false; 
      } 
     }, 
     error: function (res) { } 
    }); 
} 

// This function returns the HTML for individual Blog posting 
function GetBlogHTML(item, i) { 
    var summary = item.BlogSummary; 


    var summarySection = "<p class='post-categories'>" + item.BlogCategoryOutput + "</p></br>" + 
     "<p class='post-excerpt'>" + item.BlogSummary + "</p>"; 

    var imageSection = ""; 
    if (item.BlogImage !== null) { 
     imageSection = "<div class='post-image'>" + 
      "<a href='" + item.BlogUrl + "' onclick=\"return xt_click(this,'C','" + item.BlogXtn2 + "','[" + item.BlogParentTitle + "]::Post Click Through::[image]:: [" + item.BlogTitle + "]','N')\" width=\"100%\">" + 
      "<img src='" + item.BlogImage + "' width=\"100%\" />" + 
      "</a>" + 
      "</div>"; 
    } 

    var outPutHTML = "<li class='individualPost' >" + 
     "<article class='post'>" + 
     "<div class='post-details'>" + 
     "<h2 class='post-title'>" + 
     "<a href='" + item.BlogUrl + "' onclick=\"return xt_click(this,'C','" + item.BlogXtn2 + "','[" + item.BlogParentTitle + "]::Post Click Through::[headline]:: [" + item.BlogTitle + "]','N')\" >" + item.BlogListingTitle + "</a>" + 
     "</h2>" + 
     "<p class='post-date'> By: " + item.BlogAuthor + "</p>" + 
     "<p class='post-date'>" + item.BlogDate + "</p>" + imageSection + 
     summarySection + 
     "<footer class='post-footer'>" + 
     "<a href='" + item.BlogUrl + "' onclick=\"return xt_click(this,'C','" + item.BlogXtn2 + "','[" + item.BlogParentTitle + "]::Post Click Through::[read_more]:: [" + item.BlogTitle + "]','N')\" class='post-link'>Read More</a>" + 
     "<div class='social'>" + 
     "<div class='adtoolbox addthis_toolbox addthis_default_style' " + 
     "addthis:url='" + location.protocol + '//' + location.host + item.BlogUrl + "' addthis:title='" + item.BlogTitle + "'>" + 
     /*"<a class='addthis_button_facebook_like'></a>" +*/ 
     "<a class='addthis_button_tweet'></a>" + 
     /*"<a class='addthis_counter addthis_pill_style'></a>" +*/ 
     "<a style=\"background-color: rgb(115, 138, 141); margin-left: 2px; font-size: 11px; position: relative; height: 20px; padding: 1px 8px 1px 6px; font-weight: 500; color: #fff;cursor: pointer;" + 
     "border-radius: 3px; box-sizing: border-box; display: inline-block; vertical-align: top; zoom: 1; white-space: nowrap;\"" + 
     "class='addthis_button_email'>" + 
     "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" title=\"Email\" alt=\"Email\" style=\"width: 16px; height: 16px;\" class=\"at-icon at-icon-email\"><g><path d=\"M26.19 9.55H6.04l10.02 7.57 10.13-7.57zM16.06 19.67l-10.28-8.8v11.58h20.57V10.96l-10.29 8.71z\"></path></g></svg>" + 
     "<span style=\"display: inline-block; vertical-align: top; padding-top:2px;\">Email</span></a></div>" + 

     "</div>" + 
     "</footer>" + 
     "</div>" + 
     "</article></li>"; 
    return outPutHTML; 
} 

// Read a page's GET URL variables and return them as an associative array. 
function getUrlVars() { 
    var vars = [], hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for (var i = 0; i < hashes.length; i++) { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
} 


function getParameterByName(name, url) { 
    if (!url) url = window.location.href; 
    url = url.toLowerCase(); // This is just to avoid case sensitiveness 
    name = name.replace(/[\[\]]/g, "\\$&").toLowerCase();// This is just to avoid case sensitiveness for query parameter name 
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
     results = regex.exec(url); 
    if (!results) return null; 
    if (!results[2]) return ''; 
    return decodeURIComponent(results[2].replace(/\+/g, " ")); 
} 

function reinitiateAddThis() { 
    var script = '//s7.addthis.com/js/300/addthis_widget.js#domready=1'; 
    if (window.addthis) { 
     window.addthis = null; 
     window._adr = null; 
     window._atc = null; 
     window._atd = null; 
     window._ate = null; 
     window._atr = null; 
     window._atw = null; 
    } 
    $.getScript(script); 
} 

// View more binding on click to fetch new blog posts 
$(".blog-more-posts").click(function() { 
    var category = getUrlVars()["category"]; 
    if (category == "" || category == undefined) { 
     category = "All"; 
    } 
    var defaultNewBlogCount = 3; 
    //Add one to line up index 
    var newEnd = parseInt(end) + defaultNewBlogCount; 
    generateBlogPosts(category, end, defaultNewBlogCount, blogId); 
    end = newEnd; 
    if (!showViewMoreFlag) { 
     $('.blog-more-posts').hide(); 
    } 
    if (addthis !== null) { 
     addthis.toolbox('.adtoolbox'); 
    } 
    reinitiateAddThis(); 
}); 

// This function is called when we click on the Navigation links for Categories 
function getBlogByCategory(element, blogId) { 

    var categoryName = $(element).text(); 
    var catNameFromSc = $(element).text().replace(/\s/g, ''); 
    var end = getUrlVars()["end"]; 
    if (end == undefined) { 
     end = blogCount; 
    } 
    // Changes the URL of the page without reload 
    window.History.pushState('page 2', 'Blog Listing - ' + categoryName, pageURL + "?category=" + catNameFromSc + "&start=0&end="+end); 

    // Changing the Active class 
    jQuery("li").each(function() { 
     jQuery(this).removeClass(nameOfActiveClass); 
    }); 
    jQuery(element).closest('li').addClass(nameOfActiveClass); 

    // Fetching new Start and end index 
    var start = getUrlVars()["start"]; 
    if (start == undefined) { 
     start = 0; 
    } 
    start = start.replace(/\D/g, ''); 



    // Setting the page with new Data 
    // Emptying the blog post from previous Category 
    $('#Blog-Posts').empty(); 
    $('.blog-more-posts').hide(); 
    generateBlogPostsOnCategoryClick(catNameFromSc, start, end, blogId); 
    if (!showViewMoreFlag) { 
     $('.blog-more-posts').hide(); 
    } else { 
     $('.blog-more-posts').show(); 
    } 
} 

// This function is called when we click on the Navigation links for Categories 
function generateBlogPostsOnCategoryClick(categoryString, startIndex, endIndex, blogId) { 
    // Increased endIndex by 1 to check if there are more items to display 
    var count = parseInt(endIndex) + 1; 

    var data = "{filterName:'" + categoryString + "', startIndex:" + startIndex + ", count: " + count + ", blogId: '" + blogId + "'}"; 
    $.ajax({ 
     type: "POST", 
     url: "/WebServices/BackedByBayer/Blog/FetchBlogPost.asmx/BlogList", 
     async: false, 
     data: data, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (response) { 

      var blogCollection = response.d; 
      if (blogCollection !== null) { 
       if (blogCollection.length) { 
        var numberOfBlogPosts = blogCollection.length; 
        if (numberOfBlogPosts == count) { 
         numberOfBlogPosts = numberOfBlogPosts-1; 
         showViewMoreFlag = true; 
        } else { 
         showViewMoreFlag = false; 
        } 
        for (var i = 0; i < numberOfBlogPosts; i++) { 
         var item = blogCollection[i]; 
         $("#Blog-Posts").append(GetBlogHTML(item, i)); 
         if (addthis !== null) { 
          addthis.toolbox('.adtoolbox'); 
         } 

        }     
       } 
       else { 
        showViewMoreFlag = false; 
       } 
      } else { 
       showViewMoreFlag = false; 
      } 
      reinitiateAddThis(); 
     } 
    }); 
} 
//Analytics for add this 
$(document).ready(function() { 
    function shareEventHandler(evt) { 
     if (evt.type === 'addthis.menu.share') { 
      //alert(typeof (evt.data)); // evt.data is an object hash containing all event data 
      //alert(evt.data.service); 
      if (evt.data.service === "tweet") { 
       var x = this; 
       if (blogCollection !== null) { 
        if (blogCollection.length) { 
         var result = $.grep(blogCollection, function (item) { return evt.data.url.indexOf(item.BlogUrl) > -1 }); 
         var newArr = []; 
         for (var i = 0; i < blogCollection.length; i++) { 
          var blogItem = blogCollection[i]; 
          if (evt.data.url.indexOf(blogItem.BlogUrl) > -1) { 
           newArr.push(blogItem); 
          } 
         } 
         if (result.length == 0) { 
          // no item 
          return; 
         } else { 
          var item = result[0]; 
         } 

        } 
       } 

       xt_click(this, 'C', item.BlogXtn2 + ', [' + item.BlogParentTitle + ']::[add_this]::[tweet]::[' + item.BlogTitle + ']', 'A'); 
      } 
     } 
    } 
    addthis.addEventListener('addthis.menu.share', shareEventHandler.bind(addthis)); 
}); 

Answer 1

我相信你正在尋找event.target：

的引用調度該事件的對象。

在你的情況，這將是evt.target

Answer 2

埃裏卡，

如果我理解你的問題，我相信你可能只是想bind(this)您addEventListener，然後你應該能夠訪問單擊addThis按鈕的上下文。

addthis.addEventListener('addthis.menu.share', shareEventHandler.bind(addthis)); 

也許讀https://msdn.microsoft.com/en-us/library/dn569317(v=vs.94).aspx將有所幫助。