Какой элемент HTML был дважды нажат в DOM - PullRequest
Новая
       1

Какой элемент HTML был дважды нажат в DOM

3 голосов
/ 10 февраля 2012

Я хотел бы определить, какой элемент HTML был дважды нажат. Кажется, что-то не срабатывает в моем коде. Ниже приведена структура HTML-кода, в которой вы дважды щелкаете, чтобы определить, по какому элементу щелкнули. 

  <div id="mainWrapper">
       <div id="Banner" name="Banner" class="editable">This is the banner</div>
       <div id="MainMenu" class="editable">This is the main menu</div>
       <div id="LeftSideBar" class="editable">This is the submenu or left sidebar content</div>
       <div id="MainContent"class="editable">Here is the main content</div>
       <div id="RightSideBar" class="editable">Here are commercial ads</div>
       <div id="Footer"class="editable">This is the footer
          <a href="index.php">Go Home</a>
       </div>
  </div>

Внешний JavaScript 

window.onload = function(){
  // Listen to the double click event.
  if ( window.addEventListener )
     document.body.addEventListener( 'dblclick', onDoubleClick, false );
}

Получить элемент, который вызвал событие. Это не обязательно тот элемент, к которому было прикреплено событие. 

function onDoubleClick( ev ){
  var element = ev.target || ev.srcElement;  //target = W3C,  srcElement = Microsoft
  alert(ev.type); //displays which event has fired

  var targ;
  if (!ev) var e = window.event;
  if (ev.target) targ = ev.target;  
  else if (ev.srcElement) targ = ev.srcElement;

  alert(ev.target); //displays which type of html element has been clicked (it shows div but not which div)

  // Find out the div that holds this element.
  var name;
  do {
    element = element.parentNode;
  }
  while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || 

  element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )

  alert("The class name for the element is " + element.className); // I get nothing
  alert("The node name for the html element is " + element.nodeName);// I get "body"
}

Ответы [ 3 ]

3 голосов
/ 10 февраля 2012

Я не уверен, что именно вы пытаетесь достичь. Так ли люди могут редактировать вещи? Я хотел бы применить приемник событий onclick только к тем элементам, которые вы хотите редактировать. Если у них у всех есть «редактируемые» классы css, сделать это тривиально с помощью jquery: 

$('.editable').dblclick(dblclickFunc)

Это применило бы прослушиватель событий к каждому элементу с классом editable. Однако, чтобы сделать его более полезным, я бы изменил это на 

$('.editable').dblclick(function(e){ dblclickFunc(e, this);  })

и для функции 

dblclickFunc(e, el){
     alert('received an event of type ' + e.type + ' on ' + el.tagName);
}

Итак, у вас есть ссылка на элемент, который отправил событие. Оттуда вы можете проверить идентификаторы или даже пойти так далеко, чтобы пройтись по всем редактируемым элементам и сравнить их с тем, который был передан вам. Как только у вас есть совпадение, вы точно знаете, по какому элементу щелкнули.

0 голосов
/ 10 февраля 2012

Вы можете использовать .on()

 $(".editable").on("dblclick", function(e){

     $(this).attr('class') //Class Name

 });
0 голосов
/ 10 февраля 2012

Вы используете JavaScript в своем примере, но вы также пометили вопрос с помощью jQuery, поэтому я предполагаю, что jQuery можно использовать. Фактически, именно этот тип обработки событий значительно упрощается с помощью API jQuery, поскольку он нормализует события для всех современных браузеров. Настоятельно рекомендуется.

Вы можете делегировать событие на document и обнаруживать все двойные щелчки во всем документе, используя jQuery, используя функцию on(): 

$(document).on('dblclick', function(e) {
    console.log(e.target); // target is the element that triggered the event
    alert("The class name for the element is " + e.target.className);
    alert("The node name for the html element is " + e.target.nodeName);
});

Если вы хотите прослушивать определенные элементы внутри определенного контейнера, попробуйте это: 

$('#mainwrapper').on('dblclick', 'div', function(e) {
    console.log(e.target);
});

Это будет прослушивать любые двойные щелчки внутри #mainwrapper, но вызовет обработчик, только если целью был элемент DIV.

...