Fatal编程技术网
  • javascript/
  • Javascript 如何避免将标记映射到hyperlink并调用onclick函数instadedHTMLPHPjs

Javascript 如何避免将标记映射到hyperlink并调用onclick函数instadedHTMLPHPjs

javascript php html hyperlink

Javascript 如何避免将标记映射到hyperlink并调用onclick函数instadedHTMLPHPjs,javascript,php,html,hyperlink,area,Javascript,Php,Html,Hyperlink,Area,我正在尝试制作一个4个按钮的图像，将其作为4个按钮映射到4个不同的函数，而不是默认的超链接（href=#）。 我希望在这个PHP页面中添加、编辑、删除或更新用户数据，而不是指向不同页面的显式超链接。 即使我不得不求助于其他页面，这些数据也需要通过post或get等功能或一些自己的功能提交。但问题是，在将此图像映射为4个不同的按钮，甚至删除href并添加onclick=myfunction（）之后，它什么也不做，如果我添加href，它在单击后不会转到myfunction，而是转到href链接。 请

我正在尝试制作一个4个按钮的图像，将其作为4个按钮映射到4个不同的函数，而不是默认的超链接（href=#）。
我希望在这个PHP页面中添加、编辑、删除或更新用户数据，而不是指向不同页面的显式超链接。
即使我不得不求助于其他页面，这些数据也需要通过post或get等功能或一些自己的功能提交。但问题是，在将此图像映射为4个不同的按钮，甚至删除href并添加onclick=myfunction（）之后，它什么也不做，如果我添加href，它在单击后不会转到myfunction，而是转到href链接。
请帮忙

<html>
<head>
    <title>Panel
    </title>
    <?php
    require('connect.php');   //working connection
    $queryU = "SELECT username FROM `user`";
    $listU  = $connection->query($queryU);
    if ($listU->num_rows > 0) {
        while ($rowu = $listU->fetch_assoc()) {
            $y = $rowu['username'];    //working script
        }
    }
    ?>
    <style>
        body {
            background-image : url("main.jpg");
            opacity          : 40%;
            font-family      : AlphaMaleModern;
            text-align       : center;
            color            : #fff;
            font-size        : 26px;
        }    
        .a {
            height : 90%;  width  : 45%;
        }

        .img {
            margin-top : 20%;
            position   : relative;
        }    
        .list {
            float    : right;
            position : absolute;
            border   : lime solid;
            width    : 50%;
            z-index  : -1;
            position : static;
            top      : 10%;
            height   : 90%;
        }    
        #userlist {
            width       : 100%;
            opacity     : 0.8;
            font-family : AlphaMaleModern;
            text-align  : center;
            font-size   : 28px;
            height      : 100%;
        }    
        .img:hover, #userlist:hover {
            opacity : 1;
        }
    </style>
    <script>
        //test function 1 for on click call but not working
        document.getElementById('aa').on(click, function (e) {
                e.preventDefault();
                alert("CLICKED");
            }
        );
        //test function 2 for on click call but not working
        function printr(ss) {
            var x = document.getElementById('ss').name;
            alert(x);
            switch (x) {
                case "aa":
                    alert("AA");
                    break;
                case "b":
                    alert("B");
                    break;
                case "c":
                    alert("C");
                    break;
                case "d":
                    alert("D");
                    break;
            }
    </script>
</head>
<body>
<fieldset name="Users" class="a" style="float:right;">
    <legend>USERS
    </legend>
    <div id="user" class="user" style="">
        <img src="panel/panel.png" class="img" alt="" usemap="#Map1"/>
        <map name="Map1" id="Map1">
            <area alt="" title="" href="#" id="aa" onclick="printr(aa)" 
                  shape="poly" coords="200,8,16,10,104,108"/>
            <area alt="" title="" href="#" id="b" onclick="printr(b)" 
                  shape="poly" coords="205,14,108,109,204,197"/>
            <area alt="" title="" href="#" id="c" onclick="printr(c)" 
                  shape="poly" coords="8,201,98,110,8,15"/>
            <area alt="" title="" href="#" id="d" onclick="printr(d)" 
                  shape="poly" coords="104,113,16,208,204,207"/>
        </map>
        <div class="list">
            <select id="userlist" size="20">
                <option>
                    <?php echo $y; ?>
                </option>
                <!--list of users from mysql database (working good)-->
            </select>
        </div>
</fieldset>
</div>
</body>
</html>


面板
身体{
背景图片：url（“main.jpg”）；
不透明度：40%；
字体系列：AlphaMaleModern；
文本对齐：居中；
颜色：#fff；
字号：26px；
}    
.a{
高度：90%；宽度：45%；
}
.img{
利润率最高：20%；
位置：相对位置；
}    
.名单{
浮动：对；
位置：绝对位置；
边界：石灰固体；
宽度：50%；
z指数：-1；
位置：静态；
排名前10%；
身高：90%；
}    
#用户列表{
宽度：100%；
不透明度：0.8；
字体系列：AlphaMaleModern；
文本对齐：居中；
字号：28px；
身高：100%；
}    
.img:hover，#用户列表：hover{
不透明度：1；
}
//测试功能1的点击调用但不工作
document.getElementById（'aa'）。on（单击，函数（e）{
e、 预防默认值（）；
警报（“点击”）；
}
);
//测试功能2的点击调用但不工作
函数打印机（ss）{
var x=document.getElementById（'ss'）.name；
警报（x）；
开关（x）{
案例“aa”：
警报（“AA”）；
打破
案例“b”：
警报（“B”）；
打破
案例“c”：
警报（“C”）；
打破
案例“d”：
警报（“D”）；
打破
}
使用者
图片：

  • 我将分几步回答。 首先–您在第98行中的html块注释是错误的。 它是：

    • 因为那个错误的注释结束（不是结束）——该注释下的每一行都被注释了

  • 您的
    函数printr（ss）
    未关闭。最后一个
    }
    正在关闭
    开关
  • 您使用了
    onclick=“printr（aa）”
    而不是
    onclick=“printr（'aa'）”
    。如果没有
    ”
    括号，则表示函数参数不存在变量
    aa
    。用括号表示的是字符串
    • 我的代码版本：

      <html>
  <head>
    <title>Panel
    </title>

    <style>
      body{
        background-image: url("main.jpg");
        opacity:40%;
        font-family: AlphaMaleModern;
        text-align:center;
        color:#fff;
        font-size: 26px;
      }
      .a{
        height:90%;
        width:45%;
      }
      .img{
        margin-top:20%;
        position:relative;
      }
      .list{
        float:right;
        position:absolute;
        border:lime solid;
        width:50%;
        z-index:-1;
        position:static;
        top:10%;
        height:90%;
      }
      #userlist{
        width:100%;
        opacity: 0.8;
        font-family:AlphaMaleModern;
        text-align:center;
        font-size:28px;
        height:100%;
      }
      .img:hover,#userlist:hover{
        opacity: 1;
      }
    </style>
    <script>
        function printr(ss)
        {
            switch (ss)
            {
                case "aa":
                alert("AA");
                break;
                case "b":
                alert("B");
                break;
                case "c":
                alert("C");
                break;
                case "d":
                alert("D");
                break;
            }
        }
    </script>
  </head>
  <body>
    <fieldset name="Users" class="a" style="float:right;">
      <legend>USERS
      </legend>
      <div id="user" class="user"  style="">
        <img src="https://i.stack.imgur.com/7A0Ky.png" class="img" alt="" usemap="#Map1" />
        <map name="Map1" id="Map1">
          <area alt="" title="" href="#" id="aa" onclick="printr('aa')" shape="poly" coords="200,8,16,10,104,108" />
          <area alt="" title="" href="#" id="b" onclick="printr('b')" shape="poly" coords="205,14,108,109,204,197" />
          <area alt="" title="" href="#" id="c" onclick="printr('c')" shape="poly" coords="8,201,98,110,8,15" />
          <area alt="" title="" href="#" id="d" onclick="printr('d')" shape="poly" coords="104,113,16,208,204,207" />
        </map>
        <div class="list"  >
          <select id="userlist" size="20">
            <option>

            </option>   
            <!--list of users from mysql database (working good) -->
</select>
</div>
</fieldset>
</div>
</body>
</html>

    
面板
身体{
背景图片：url（“main.jpg”）；
不透明度：40%；
字体系列：AlphaMaleModern；
文本对齐：居中；
颜色：#fff；
字号：26px；
}
.a{
身高：90%；
宽度：45%；
}
.img{
利润率最高：20%；
位置：相对位置；
}
.名单{
浮动：对；
位置：绝对位置；
边界：石灰固体；
宽度：50%；
z指数：-1；
位置：静态；
排名前10%；
身高：90%；
}
#用户列表{
宽度：100%；
不透明度：0.8；
字体系列：AlphaMaleModern；
文本对齐：居中；
字号：28px；
身高：100%；
}
.img:hover，#用户列表：hover{
不透明度：1；
}
函数打印机（ss）
{
开关（ss）
{
案例“aa”：
警报（“AA”）；
打破
案例“b”：
警报（“B”）；
打破
案例“c”：
警报（“C”）；
打破
案例“d”：
警报（“D”）；
打破
}
}
使用者

    
这并不是一个清晰的代码，但它现在正在工作。

    顺便说一下，为了不打扰自己，我删除了php部分等。我希望你明白我做了什么。请记住，如果javascript中有错误，它将不会执行。
    我非常感谢您为解决错误所做的努力，但即使在删除错误后，主要问题仍然是一样的。正如我在脚本开始时在JS中测试了一个简单的alert（）调用一样，它可以工作，但是任何图像映射上的onclick（）都无法工作。请帮忙！！可能我没有列举一两个bug。您是否检查了JSFIDLE（答案末尾附近的链接）是否一切正常？对我来说，它适用于所有浏览器。唯一剩下的问题是，你已经从代码中删除了几行，这实际上阻碍了它的运行。这些是：函数printr（ss）{var x=document.getElementById（“ss”）.name；alert（'x'）；为了保持简单，我删除了一些javascript代码。可能有一个我没有注意到的bug。