CODEWITHSUNDEEP
javascript
jmenezes
jmenezes

Reputation: 1926

JavaScript on mouseDown get parentElement when child is clicked

In the following scenario, there's a mouseDown event listener on <div class="main" id="main">

If any of the elements were clicked, how can I get to the <div class="subChild" role="menuitem" id="x"> parent of that element?

For eg: If This is Element 5 is clicked the node I'm trying to get is <div class="subChild" role="menuitem" id="3">

JsFiddle

<div class="main" id="main">
    <div class="mainChild">
        <div class="subChild" role="menuitem" id="1">
            <div class="sub">
                <div class="kidOne">This is Element 1</div>
                <div class="kidTwo">This is Element 2</div>
            </div>
        </div>
        <div class="subChild" role="menuitem" id="2">
            <div class="sub">
                <div class="kidOne">This is Element 3</div>
                <div class="kidTwo">This is Element 4</div>
            </div>
        </div>
        <div class="subChild" role="menuitem" id="3">
            <div class="sub">
                <div class="kidOne">This is Element 5</div>
                <div class="kidTwo">This is Element 6</div>
            </div>
        </div>
    </div>
</div>

Javascript

k = document.getElementById('main');

k.addEventListener('mousedown', myFunction)

function myFunction(event) {
    console.log(event.target)
    console.log(this);

}

Upvotes: 0

Views: 929

Answers (2)

KhaiTran
KhaiTran

Reputation: 121

you can use Element.closest() to get parent elements like that

k = document.getElementById('main');

k.addEventListener('mousedown', myFunction)

function myFunction(event) {
    console.log(event.target)
    console.log(event.target.closest('.subChild'));

}

More information Click here!

Upvotes: 2

Zachary Haber
Zachary Haber

Reputation: 11017

You can easily go up from a node to its parent using .parentElement or .parentNode.

So, by chaining that twice on the event.target.parentElement.parentElement, you have your subChild element!

k = document.getElementById('main');

k.addEventListener('mousedown', myFunction)

function myFunction(event) {
    console.log(event.target.parentElement.parentElement);
}
<div class="main" id="main">
    <div class="mainChild">
        <div class="subChild" role="menuitem" id="1">
            <div class="sub">
                <div class="kidOne">This is Element 1</div>
                <div class="kidTwo">This is Element 2</div>
            </div>
        </div>
        <div class="subChild" role="menuitem" id="2">
            <div class="sub">
                <div class="kidOne">This is Element 3</div>
                <div class="kidTwo">This is Element 4</div>
            </div>
        </div>
        <div class="subChild" role="menuitem" id="3">
            <div class="sub">
                <div class="kidOne">This is Element 5</div>
                <div class="kidTwo">This is Element 6</div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions