Question

问题： 我有一个带有类名'hasChildren'的锚标记，后者又有一个包含文本的span元素。当在锚标记上使用EXT的.on（'mouseenter'，function（））时，它会在span和/或anchor标记上触发事件。

预期结果： 将鼠标悬停在span或锚标记上，该类应该单独添加到锚标记

当前结果： 将鼠标悬停在span或anchor标记上，该类将被添加到首先获得焦点的元素中。

在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

尝试在div中包围你的锚标签，然后在div上附加监听器。我想你想在这种情况下尝试将事件附加到最外层的容器中。

Answer 3

我最终找到了我想要的东西。 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 } });

使用EXT的mouseenter停止在子元素上触发事件

3 个答案: