How to return the specific element when using multiple custom share buttons on the same page, using querySelectorAll?

Question

How to return the specific element when using multiple custom share buttons on the same page, using querySelectorAll?

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

This custom Facebook share button works great when you place just one button on each page. (This is an excellent way to make projects made in Ajax and JavaScript traceable to search engines and social networks.)

When I put multiple buttons on the same page I had problems with querySelector (In the documentation it says that querySelector returns the first element inside the document ...), but I still do not know how to return only the element that was clicked.

I would like a well-rounded orientation to complete part of this long search, to make shares buttons traceable.

@Sergio Thanks for the introduction in the comment, but I still could not match the querySelectorAll with the iteration with the for , so I concatenei the question as directed.

This is the part corresponding to the source file, edited and made available to my project, you can see the original post on this site: customizable Facebook share button

Html

            <div id="fb-root"></div>
<a fb-share ng-href="http://www.exemplo.com/{{item.href}}" data-image="{{item.img}}" data-title="{{item.titulo}}" data-desc="{{item.descricao}}" class="fb_share"  >
    <div class="botao-fb"></div>
</a>

CSS: to insert the image in a more practical way

.botao-fb {
 width: 101px;
 height: 20px; 
background-image:url(/images/fb-icone.png);
background-repeat:no-repeat;  
margin-bottom: 3px;
}

Policy with the script

    .directive('fbShare', ['$window', function ($window) {
      return {
        scope:{
            fbShare: '='
        },
        restrict: 'AE',

        link: function (scope, element, attrs) {
            window.fbAsyncInit = function() {
        FB.init({
            appId: '1405211842504456', //esse AppId é apenas demonstrativo, substitua com o seu
            status: true,
            cookie: true,
            xfbml: true
        });
    };

    (function(d, debug){var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];if   (d.getElementById(id)) {return;}js = d.createElement('script'); js.id = id; js.async = true;js.src = "//connect.facebook.net/pt_BR/all" + (debug ? "/debug" : "") + ".js";ref.parentNode.insertBefore(js, ref);}(document, /*debug*/ false));

    function postToFeed(title, desc, url, image) {
        var obj = {method: 'feed',link: url, picture: 'http://www.exemplo.com/images/'+image,name: title,description: desc};
        function callback(response) {}
        FB.ui(obj, callback);
    }

    var fbShareBtn = document.querySelectorAll('.fb_share');
    for (var i = 0; i < fb_share.length; i++) {
        console.log(fb_share[i]);
    };
    fbShareBtn.addEventListener('click', function(e) {
        e.preventDefault();
        var title = fbShareBtn.getAttribute('data-title'),
            desc = fbShareBtn.getAttribute('data-desc'),
            url = fbShareBtn.getAttribute('href'),
            image = fbShareBtn.getAttribute('data-image');
        postToFeed(title, desc, url, image);

        return false;
    });
}]);

javascript jquery angularjs

asked by anonymous 16.02.2015 / 12:54

2 answers

1

In addition to the @Sergio response I needed to add the event.stopImmediatePropagation(); (which keeps the rest of the handlers from running and prevents the event from bubbling the DOM tree.)

Well, I used multiple facebook buttons on a page and I was opening several dialogs when I clicked the button. Now it's working fine.

function fbShareBtnFn(event) {
     event.preventDefault();
    var title = this.getAttribute('data-title'),
        desc = this.getAttribute('data-desc'),
        url = this.getAttribute('href'),
        image = this.getAttribute('data-image');
    postToFeed(title, desc, url, image);
// retirei o 'return false;' e coloquei o 'event.stopImmediatePropagation();'
    event.stopImmediatePropagation();
};
var fbShareBtns = document.querySelectorAll('.fb_share');
for (var i = 0; i < fbShareBtns.length; i++) {
    fbShareBtns[i].addEventListener('click', fbShareBtnFn);
};

05.03.2015 / 22:30

Problems with Width Secure backup using MySQL and C #

score 3 · Accepted Answer

If you use querySelectorAll you have to iterate the elements and join the event handler like this:

function fbShareBtnFn(e) {
    e.preventDefault();
    var title = this.getAttribute('data-title'),
        desc = this.getAttribute('data-desc'),
        url = this.getAttribute('href'),
        image = this.getAttribute('data-image');
    postToFeed(title, desc, url, image);
    return false;
};
var fbShareBtns = document.querySelectorAll('.fb_share');
for (var i = 0; i < fbShareBtns.length; i++) {
    fbShareBtns[i].addEventListener('click', fbShareBtnFn);
};

And since the Event handler is called for each element the this within that function corresponds to the clicked element.