jQuery用on()代理的方法实现鼠标点击事件，当前的背景色变化其他的背景色不变

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .wrapper li{
            list-style-type: none;
            width: 100px;
            height: 20px;
            border: 1px solid #ccc;
            text-align: center;
        }
        /*需要切换的hover类*/
        .hover{
            background-color: blue;
            color: white;
            font-weight: bold;
        }
    </style>

</head>
<body>
    <ul class="wrapper">
        <li>1111111</li>
        <li>2222222</li>
        <li>3333333</li>
        <li>4444444</li>
        <li>5555555</li>
        <li>6666666</li>
        <li>7777777</li>
    </ul>
    <script type="text/javascript">
        // 鼠标点击事件   换色
        $(‘.wrapper‘).on(‘click‘, ‘li‘, function(event) {
            // 当前的li添加hover类其兄弟元素移出hover类
            $(this).addClass(‘hover‘).siblings().removeClass(‘hover‘)
        });

    </script>

</body>
</html>

原文地址：https://www.cnblogs.com/myunYao/p/8820275.html

时间： 2024-07-31 14:09:30

jQuery用on()代理的方法实现鼠标点击事件，当前的背景色变化其他的背景色不变的相关文章

jQuery模拟鼠标点击事件失效的问题

最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click')的写法也是无济于事. 在网上一顿扒拉后,发现使用$('div#pager a.next')[0].click();就OK了. $('div#pager a.next')[0]这种写法其实就相当于把jQuery对象转换为Dom对象了. 模拟点击不生效的原因如果使用jQuery的写法:$('a#t

jquery无法为动态生成的元素添加点击事件的解决方法

遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <div> <ul> <li> <span> <i class='icon'>这是元素内容</i> //i是动态生成 </span> </li> </ul> </div> 解决方法如下: $(docu

android基础之如何实现触屏监听和鼠标点击事件

直接上代码: android基础之如何实现触屏监听和鼠标点击事件

鼠标点击事件

1 鼠标点击事件 2 onclick 元素上发生鼠标点击时触发. 3 ondblclick 元素上发生鼠标双击时触发. 4 ondrag 元素被拖动时运行的脚本. 5 ondragend 在拖动操作末端运行的脚本. 6 ondragenter 当元素元素已经被拖动到有效拖放区域时运行的脚本. 7 ondragleave 当元素离开有效拖放目标时运行的脚本. 8 ondragover 当元素在有效拖放目标上正在被拖动时运行的脚本. 9 ondragstart 在拖动操作开端运行的脚本. 10 on

JavaFX如何制作鼠标多击事件?

JavaFX制作鼠标双击或者多击事件需要用到getClickCount()方法,这个方法需要添加addEventHandler()方法,addEventHandler()是事件方法. 1 scene.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() { 2 3 @Override 4 public void handle(MouseEvent event) { 5 int times=event.g

Android 四种方法写按钮点击事件

1.匿名内部类的方式 2. 创建一个类实现onclickListener,实现onclick方法,设置控件点击事件时传一个类的对象. 3. 让当前类实现onclickListener,设置控件点击事件时传一个this.这种方式适合按钮比较多的情况,一般在公司采用该方式. 4. 在布局文件中为控件添加一个onclick属性,在布局对应的Activity中写一个一onclick属性值为名的方法,要public,传一个View类型的参数.比较适合做简单的测试.

WPF中C#代码触发鼠标点击事件

1.如下代码; 1 <Button x:Name="btnTest" Click="btnTest_Click"> 2 <Button.Triggers> 3 <EventTrigger RoutedEvent="Button.Click"> 4 <BeginStoryboard> 5  6 </BeginStoryboard> 7 </E

Listbox与dataGridView的获取鼠标点击事件的区别！！！

1 int index = lisxian.IndexFromPoint(e.X, e.Y);//获取鼠标点击 2 lisxian.SelectedIndex = index; Listbox获取鼠标的代码!!!! 1 int index = e.RowIndex; 2 DataGridViewRow currenRow = this.dgvxian3.Rows[index]; dataGridView获取鼠标代码!!!! private void lisxian_SelectedIndexCh

QT中模拟鼠标点击事件

传入座标,模拟鼠标点击QWebView中网页上的某一点 qDebug()<<"mouse clicked"; QPoint pos(403,34); QMouseEvent event0(QEvent::MouseButtonPress, pos, Qt::LeftButton, Qt::LeftButton, Qt::NoModifier); QApplication::sendEvent(view->page(), &event0); QMouseEven