javascript - 添加跟踪事件和单击对象的事件监听器？

标签 javascript jquery events dom-events addeventlistener

我有一个事件监听器来捕获事件，但我还想捕获单击了哪个项目。这是我的代码:

$(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 按钮的属性和父对象单击，但我不确定如何将其传递到函数中。

<小时/>

编辑:整个文件

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));
});

最佳答案

我相信您正在寻找event.target :

A reference to the object that dispatched the event.

在您的情况下，这将是 evt.target

关于javascript - 添加跟踪事件和单击对象的事件监听器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38084006/

上一篇：javascript - Google Charts Y 轴未排序

下一篇：javascript - 未捕获的语法错误 : Unexpected token : AJAX

相关文章：

javascript - 为什么 {10 + '1' } + 10 等于 10？

jquery - onfinish 事件 jquery.steps 后禁用完成按钮

unit-testing - 如何测试 Vue 组件是否响应 $root 发出的事件？

javascript - 如何在 JavaScript 中实现锁

javascript - Angular2 中的 CORS 问题

c# - 实时聊天消息队列,ASP.NET

javascript - 将多个选择器传递给一个函数

events - pharo 中的事件系统

javascript - 对于 IOS Phonegap 应用程序，是否可以包含非应用程序本地的 javascript 文件

jquery - 在 jsTree 中只显示匹配的节点

©2024 IT工具网  联系我们