CODEWITHSUNDEEP
javascriptjquery
lipenco
lipenco

Reputation: 1368

setting focus by clicking on element but excluding some children

I would like to focus element .editor on every click on .step. The problem is that I would like exclude clicking on on the buttons: .new, .delete, .copy, .resize. If i click on buttons, i am not focusing, just executing others functions setting in separately. How can I do this. This is html structure:

<div class="step">
 <div class="editor"></div>
   <div class="new"></div>
   <div class="delete"></div>
   <div class="copy"></div>
   <div class="resize"></div>
</div>

Here is my wrong jQuery:

$(document).on('click', '.step', function() {
    if ( $(this)  !== $(".sort-slides") || $(".draggable_on") || $(".copy-slide") || $(".new-slide") || $(".delete-slide")  )
    $(this).find(".editor").focus();
});

Upvotes: 0

Views: 175

Answers (2)

stafffan
stafffan

Reputation: 492

First of all, your if statement is not correct.

if (x == 1 || 2 || 3 || 4 || 5) { ... }

is NOT the same as 

if (x == 1 || x == 2 || x == 3 || x == 4 || x == 5) { ... }

The statement will always return true, since anything apart from 0 will be truthy. So even if x would be 0, the statement would be

if (false || true || true || true || true) { ... }

Furthermore, $(this) will always be the .step div catching the click event, and not any of it's children.

Upvotes: 1

LandonSchropp
LandonSchropp

Reputation: 10244

In JavaScript, when an event fires on an element, it's triggered on each of the element's ancestors. This is called event propagation. It's possible to stop this behavior by returning false from your event handler.

$(".new, .delete, .copy, .resize").click(function(event) {

  // do something
  alert("click");

  // prevent the event from propagating
  return false;
});

$(".step").click(function() {

  // do something
  alert("focus");
});

Here's an example on CodePen.

However, as Gupta said, the focus function is only applicable to <input>, <select> and <a> tags.

Upvotes: 1

Related Questions