Click issue if button has childs

Question

I've:

backdrop = document.getElementById('backdrop');
dialog = document.getElementById('dialog');
dialog_body = document.querySelector('#dialog .body');
document.addEventListener('click', function(e) {
if ( matches.call(e.target, '[data-show=dialog]')) {
    buoy.addClass(backdrop, 'fadeIn');
    buoy.addClass(dialog, 'fadeIn');
    var href = e.target.parentNode.getAttribute('action');
    dialog_body.innerHTML = '<div>FOOOOO</div>';
    [].forEach.call(document.querySelectorAll('[data-hide=dialog]'), function(el) {
      el.addEventListener('click', function() {
        buoy.removeClass(backdrop, 'fadeIn');
        buoy.removeClass(dialog, 'fadeIn');
      })
    })
}

}, false);

and [data-show=dialog] is:

<button type="sumit" class="btn xs default" data-show="dialog">
    <i class="ellipsis-v"></i>
</button>

If I click on

<i class="ellipsis-v"></i>

the code doesn't work..

If I click out of

<i class="ellipsis-v"></i>

the code works perfectly..

Also if I have:

<button type="sumit" class="btn xs default" data-show="dialog">
    <i class="ellipsis-v"></i>
    <span>fooo</span>
</button>

If I click on

<i class="ellipsis-v"></i>

or

<span>fooo</span>

the code doesn't work..

If I click out of

<i class="ellipsis-v"></i>

or

span>fooo</span>

the code works perfectly..

What is the problem?

cocco · Answer 1 · 2014-01-30T12:14:40.027

0

Why Not:

function handler(e){
 var t=e.target;
 if(t.dataset['show']=='dialog'||t.parentNode.dataset['show']=='dialog'){
  /* code ...... */ 
 }
}
document.addEventListener('click',handler,false);

in this case you have one eventHandler.(no loops).

you can add that handler to the parentNode for simplicity.

and you have to add a better check for t.dataset['show']=='dialog' as it produces an error if it has no dataset. (i wrote it just to give you an idea)

btw you search for data-hide but you have only data-show

if you have any questions just ask..

if i misunderstood your question tell me so i can reelaborate the code.

DEMO

http://jsfiddle.net/A7xk2/1/

Less eventHadlers is always more performance...

also in this example i'm just writing now... i need alot of mouse events and most of them are on the document itself...

http://jsfiddle.net/LxX34/12/

EDIT

Add the click handler on the btn elements

it works on span on li and on button as you can see in this example.

maybe your li has some sort of preventDefault or return false??

http://jsfiddle.net/A7xk2/2/

edited Jan 30 '14 at 12:14

answered Jan 30 '14 at 11:18

cocco

16,442
7
62
77

The problem is I want when I click or javascript consider – Sergio Pisoni Jan 30 '14 at 11:49
create a jsfiddle so i see better whats the problem.. anyway i have to go now for 10min.. but if you do so i'm happy to help you to resolve your problem. – cocco Jan 30 '14 at 11:51
don't use forEach & call it has a bad performance.also queryselector. use classname or id – cocco Jan 30 '14 at 12:19
I use queryselector and foreach cause ajax calls.......ther's another way? I've post my entire code...... – Sergio Pisoni Jan 30 '14 at 12:40
who wrote that code? there are much simpler ways to write that mess. 'matches.call(e.target, '[data-show=dialog]')' ??? .. tell me in simple words like 'i want to fade in every element from ajax' what you wanna do and i show you how. – cocco Jan 30 '14 at 12:43
var matches; (function(doc) { matches = doc.matchesSelector || doc.webkitMatchesSelector || doc.mozMatchesSelector || doc.oMatchesSelector || doc.msMatchesSelector; })(document.documentElement); for matches function... – Sergio Pisoni Jan 30 '14 at 12:46
juse because there is a new api for it does not mean it's better.. most of the time it's slower (it should be simpler) but that one is useless. – cocco Jan 30 '14 at 12:47
your using library for compatibility reasons?? in that case you should use every comand from that library. the first thing i see is that you use 'e.target' which would break the compatiblity. as older firefox don't support e.target.. also ie not – cocco Jan 30 '14 at 12:51
if you just want to be compatible with modern browsers ... all new ones including ie10,ios and android .. i suggest you use standard javascript. – cocco Jan 30 '14 at 12:52
Ok..... I've ajax call that populate the page with divs and their [data-show=dialog]..... I've to add ".fadeIn" class to #backdrop and #dialog when I click on [data-show=dialog] elements that are calles via ajax... and #backdrop has [data-hide=dialog] for remove ".fadeIn" class from #backdrop and #dialog. #backdrop and #dialog are static elements of the page. My original problem was simple: when I click on button that has [data-show=dialog], if I click on button icon or span it doesn't work, but if I click on button pudding that is not icon or span it doesn't. You're very gentle man... – Sergio Pisoni Jan 30 '14 at 12:54
I'm interested for compatibility from IE9, FF 24, and all recent.. I've decided to traduced my jquery in vanilla and I'm in trouble.. – Sergio Pisoni Jan 30 '14 at 12:58
mh yeah actually ie9 and ff24 are a big problem.. srsly if you read the caniuse.com site you will notice that both properly work only in the latest versions. and even if i hate to say that then you should use jquery.(i don't use it) especially if you use ajax. – cocco Jan 30 '14 at 13:01
and then add those eventhandlers with jquery. because for example e.target in ff24 = e=e||window.event;e.target=e.target||e.srcElement.. and so on... – cocco Jan 30 '14 at 13:02
.. so.. to go back to you base problem: http://jsfiddle.net/A7xk2/2/ in this example you can see how i add the click handlers . and also that clicking on the i element works. that means that your i element has something that stops from bubbling. – cocco Jan 30 '14 at 13:05
IE 9 and FF 24 are used by a lot of people.....right? But I want have vanilla js for performance reasons....right? I've found yet a good code for ajax calls... – Sergio Pisoni Jan 30 '14 at 13:06
vanilla // pure js is cool but you need to learn the basics first .. don't use all this new apis like foreach call matches ... whatever ... you should use simple for loops while getElementByClassName ect... those are much much faster than the new ones. the new ones are just for some special occasions if nothing else can help. – cocco Jan 30 '14 at 13:07
If you're available in a month you could translate my jquery in vanilla......As a Work.....right? What about that? Can you give me an email? – Sergio Pisoni Jan 30 '14 at 13:07
http://stackoverflow.com/a/18309057/2450730 this is the ajax function i use for everything.Pure js - Simple & short. – cocco Jan 30 '14 at 13:08
no i do it for fun .... i don't work with it. but i can help you.Read some fome of my answers... they are all in PURE JS.. i hate jquery. – cocco Jan 30 '14 at 13:10
http://stackoverflow.com/a/21353032/2450730 .. if i write a function i rewrite everithing so many times until no compressor can compress my code. – cocco Jan 30 '14 at 13:12
function load(url, from, to) { var cached=sessionStorage[url]; if(!from){from="body";} // default to grabbing body tag if(to && to.split){to=document.querySelector(to);} if(!to){to=document.querySelector(from);} // default re-using the source elm as the target elm var XHRt = new XMLHttpRequest; // new ajax XHRt.responseType='document'; // ajax2 context and onload() event XHRt.onload= function() { sessionStorage[url]=to.innerHTML= XHRt.response.querySelector(from).innerHTML;}; XHRt.open("POST", url, true); XHRt.send(); return XHRt; } This is my ajax.. – Sergio Pisoni Jan 30 '14 at 13:15
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/46431/discussion-between-niser-and-cocco) – Sergio Pisoni Jan 30 '14 at 13:15

Click issue if button has childs

1 Answers1