html map area 利用csspointer-events穿透属性-实现点击事件绑定-JQuery版

最新推荐文章于 2024-06-26 08:42:55 发布

[前端]-小王

最新推荐文章于 2024-06-26 08:42:55 发布

阅读量236

点赞数 1

本文链接：https://blog.csdn.net/wy080815/article/details/119667154

版权

html map area 利用csspointer-events穿透属性-实现点击事件绑定-JQuery版

文章目录

html map area 利用csspointer-events穿透属性-实现点击事件绑定-JQuery版
一、这是神马？
- 1.JavaScript
- 2.JQuery
二、使用步骤
- 1.直接上demo
总结

# 小伙伴们点赞、收藏、评论是对我最大的支持！！提示：以下是本篇文章正文内容，下面案例可供参考

一、这是神马？

1.JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

2.JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

二、使用步骤

1.直接上demo

代码如下（示例）：
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html map area hover事件-利用csspointer-events穿透属性</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <div class="region" style="position: relative;">
        <div id="regionDiv1"
            style="pointer-events: none; display: none; width: 50px; height: 50px; background-color: red; opacity: 0.3; position: absolute; top: 100px; left: 100px;">
        </div>
        <div id="regionDiv2"
            style="pointer-events: none; display: none; width: 50px; height: 50px; background-color: red; opacity: 0.3; position: absolute; top: 200px; left: 200px;">
        </div>
        <img src="images/123.jpg" style="width: 400px; height: 300px;" usemap="#Map">
        <map name="Map" id="map" style="pointer-events: auto;">
            <area shape="rect" class="shanghai" onmouseover="shanghaishow('regionDiv1')"
                onmouseout="shanghaihide('regionDiv1')" coords="100,100,150,150" href="#">
            <area shape="rect" class="nanjing" onmouseover="nanjingshow('regionDiv2')"
                onmouseout="nanjinghide('regionDiv2')" coords="200,200,250,250" href="#">
        </map>
    </div>
    <script type="text/javascript">
        function shanghaishow(regionDiv1) {
            var obj = document.getElementById('regionDiv1')
            if (obj.style.display == 'none') obj.style.display = 'block';
        }
        function shanghaihide(regionDiv1) {
            var obj = document.getElementById('regionDiv1')
            if (obj.style.display == 'block') obj.style.display = 'none';
        }
        function nanjingshow(regionDiv2) {
            var obj = document.getElementById('regionDiv2')
            if (obj.style.display == 'none') obj.style.display = 'block';
        }
        function nanjinghide(regionDiv2) {
            var obj = document.getElementById('regionDiv2')
            if (obj.style.display == 'block') obj.style.display = 'none';
        }

        $(".shanghai").click(function () {
            console.log('我被摸了一次');
        });
        $(".nanjing").click(function () {
            console.log('我被摸了二次');
        });
    </script>
</body>
</html>