Остановить срабатывание события на дочерних элементах с помощью мышки EXT

Question

Проблема: У меня есть тег привязки с именем класса 'hasChildren', который в свою очередь имеет элемент span, содержащий текст. При использовании EXT .on ('mouseenter', function ()) для тега привязки, оно генерирует событие как для span, так и / или для тега привязки.

ожидаемый результат: при наведении курсора на промежуток или тег привязки класс должен быть добавлен только к тегу привязки

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

Как и в JS, вы увидите, что я попробовал функцию наведения, но дает те же результаты.

HTML:

<a class="hasChildren" href="#"><span>web 2.0</span></a>

CSS:

.hasChildren {
  display:block;
  width:100px;
  background-color:#333;
}
.hasChildren span {
  background-color:#EEE;
  display:block;
  line-height:40px;
  margin-left:10px;
  padding:0 20px 10px 10px;
}

JavaScript:

function over(e,t){
    Ext.get(t).addClass('red');
}
function out(e,t){
    Ext.get(t).removeClass('red');
}
Ext.onReady(function() {
    //Ext.select('.hasChildren').hover(over,out,this);
    Ext.select('.hasChildren').on('mouseenter',over);
    Ext.select('.hasChildren').on('mouseleave',out);
});

К вашему сведению: Я использую ext-core-3.1.0 , и я могу заставить это работать, используя jQuery, но, как ведущий разработчик, попросил использовать только extJS хотелось бы, чтобы это работало без добавления еще одной библиотеки JavaScript.

Answer 1

Используйте эту функцию Ext.Element: addClassOnOver ().Итак, для вашего случая это будет:

Ext.onReady(function() {    
    Ext.select('.hasChildren').addClassOnOver('red');
});

Это автоматически переключит класс CSS.

Answer 2

В конце концов я нашел то, что искал.Функции javascript должны измениться так, чтобы они выглядели следующим образом:

function over(e,t){
    Ext.get(e.getTarget('a')).addClass('red');
}
function out(e,t){
    Ext.get(e.getTarget('a')).removeClass('red');
}

Объяснение: Ранее я пытался добавить класс к 't', как в get (t), что по праву могло бы бытьродительский или дочерний элемент.Но с помощью (e.getTarget ('a')) я говорю ему выбрать тег привязки и применить класс только к этому элементу.

Этот метод дает один контроль над распространением, забавно то, что следующее можеттакже работает для функции 'out', и она будет работать точно так же (теоретически):

function out(e,t){
    Ext.get(e.getTarget('span')).parent().removeClass('red');
}

Еще одна вещь, которую я обнаружил: Функции Ext.onReady также можно записать как:

Ext.select('.hasChildren').on( { mouseenter: { fn: over } } );

Этот способ облегчает добавление дополнительных событий к целевым элементам (элементам)

Ext.select('.hasChildren').on( { mouseenter: { fn: over } },  { mouseleave: { fn: out } });

Answer 3

Попробуйте окружить свой тег привязки в div, а затем прикрепите слушателей к div. Я думаю, что вы хотите попытаться прикрепить события к внешнему контейнеру в этом случае.