JavaScript addEventListener only for outerDiv

Question

i have a question about JavaScript addEventListener, i have two div and in this divs there is a input text.

(please with JavaScript)

i want to register a click only for div not for the input.

<div id="deneme">
    <input style="margin: 10px;" type="textbox" />
    <div id="new"></div>
</div>

JavaScript:

var divTag = document.getElementsByTagName("div");

for (var i = 0; i < divTag.length; i++) {
    if (divTag[i].tagName == "DIV" || divTag[i].tagName == "div") {
         if (divTag[i].addEventListener) {
            divTag[i].addEventListener('click', redirect,false);
         } 
         else if (divTag[i].attachEvent) {
            divTag[i].attachEvent('on' + 'click',redirect);
         }
    }
}

function redirect(e) {
    alert("redirect");
    e.stopPropagation();
}

CSS :

#deneme {
    width:200px;
    height:200px;
    background-color:yellow;
}
#new{
    width:20px;
    height:20px;
    background-color:green;
}

can you help me?

Thanks in advance.

Is there a reason why you're not using getElementsByClassName? — cport1, Nov 18 '14 at 16:42
because there can be divs without class, in this reason, i want to implement general solution for all divs — aldimeola1122, Nov 18 '14 at 16:51

score 0 · Answer 1 · answered Nov 18 '14 at 16:41

0

If you only have two divs, use document.getElementById instead of getElementsByTagName. You can add the two elements to an array and still iterate over them with your loop.

Otherwise, you can modify your event handler to check that e.target isn't the input.

As a side note, if you're going to be doing a lot of event handling, consider using jQuery. It'll make your life easier in that you do not need to worry about cross-browser compatibility.

answered Nov 18 '14 at 16:41

dshapiro

376
2
12

thanks, i want to use also jquery but i can not use ,i will try e.target – aldimeola1122 Nov 18 '14 at 16:49

wedi · Answer 2 · 2014-11-18T16:59:31.910

You will need to move the input outside the outer div and use CSS to reposition the input above that div. See this Fiddle.

<input style="margin: 10px;" type="textbox" />    
<div id="deneme">
    <div id="new"></div>
</div>
input {
    position: absolute;
}

Edit: Okay, if you cannot move the input as suggested above, you need to test which element triggered the event. I updated the fiddle accordingly.

function is(type, obj) {
    // source: http://bonsaiden.github.io/JavaScript-Garden/#the-class-of-an-object
    var class = Object.prototype.toString.call(obj).slice(8, -1);
    return obj !== undefined && obj !== null && class === type;
}

function redirect(e) {
    if ( is('HTMLInputElement', e.target) ) {
        return false;
    }
    alert("redirect");
    e.stopPropagation();
}

input should remain in DIV – aldimeola1122 Nov 18 '14 at 16:47 — aldimeola1122, Nov 18 '14 at 16:47

score 0 · Answer 3 · answered Nov 18 '14 at 17:05

Not that I like such kind of solution, but if you only want to redirect from the div you can check what kind of element has been pressed, by getting the target and its constructor name.

Code (HTML):

<div id="deneme">
    <input style="margin: 10px;" type="textbox" />
    <div id="new"></div>
</div>

Code (JS):

var divTag = document.getElementsByTagName("div");

for (var i = 0; i < divTag.length; i++) {
    if (divTag[i].tagName == "DIV" || divTag[i].tagName == "div") {
         if (divTag[i].addEventListener) {
            divTag[i].addEventListener('click', redirect,false);
         } 
         else if (divTag[i].attachEvent) {
            divTag[i].attachEvent('on' + 'click',redirect);
         }
    }
}

function redirect(e) {
    if (e.target.constructor.name == "HTMLDivElement") {
         alert("redirect");
    }
    e.stopPropagation();
}

Working fiddle: http://jsfiddle.net/d5z8zgf0/

score -1 · Answer 4 · edited May 23 '17 at 12:05

-1

You may want to check out JQuery for your solution. Try something like:

$("#deneme").click(function(){
  alert("The div was clicked."  /* Or do something else */);
});

Also there may be a similar question here: addEventListener vs onclick

edited May 23 '17 at 12:05

Community

1
1

answered Nov 18 '14 at 16:41

Andrew Clifford

11
1

please with pure javaScript – aldimeola1122 Nov 18 '14 at 16:51
Not sure what you mean by the condescending picture. – Andrew Clifford Nov 18 '14 at 17:08

JavaScript addEventListener only for outerDiv

4 Answers4