zoukankan      html  css  js  c++  java
  • javaScript click事件 层控制的问题

    要实现一个javaScript 方法,大层调用一个js 事件,该层内部的元素调用调用另一个方法。

    问了个朋友才知道,可以使用 stopPropagation() 方法来停止事件的传播。

    实例:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <style type="text/css">
    .li_content{ background-color:#fff;  display:none; }
    .span_edit{ padding-left:15px;}
    </style>
    <script src="Script/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(".li_title").bind("mouseover", function() {
    $(this).css("background-color", "#C7EEFF");
    }).bind("mouseout", function() {
    $(this).css("background-color", "#fff");
    }).bind("click", function() {
    $(this).next(".li_content").toggle();
    });
    $(".span_edit").click(function(event) {
    alert("只调用编辑");
    event.stopPropagation();
    });
    });
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div >
    <ul >
    <li class="li_title"><span class="span_title">信息1</span><span class="span_edit">编辑</span></li>
    <li class="li_content">信息1信息1信息1信息1信息1信息1</li>
    <li class="li_title"><span class="span_title">信息2</span><span class="span_edit">编辑</span></li>
    <li class="li_content">信息2信息2信息2信息2信息2信息2</li>
    <li class="li_title"><span class="span_title">信息3</span><span class="span_edit">编辑</span></li>
    <li class="li_content">信息3信息3信息3信息3信息3信息3</li>
    </ul>
    </div>
    </form>
    </body>
    </html>
    参考1。stopPropagation() 方法
  • 相关阅读:
    C++ 函数模板&类模板详解
    C++ const修饰不同类型的用法
    C++ 引用Lib和Dll的方法总结
    C#查询本机所有打印机
    C#如何设置桌面背景
    C#使用Aspose.Words把 word转成图片
    查看IP占用
    查看IP占用
    C# Dictionary判断Key是否存在
    C# 只有小时和分钟的两个时间进行对比
  • 原文地址:https://www.cnblogs.com/dooom/p/1776038.html
Copyright © 2011-2022 走看看