堆栈内存溢出
  简体   繁体   English

HTML onClick事件不会触发

[英]HTML onClick event does not fire

 原文  2012-03-28 22:44:26  5   1    javascript/ html/ events/ onclick

问题描述

Need some help. 需要一些帮助。 This seem like a simple piece of code, but I am stumped as to why things are not properly working. 这看起来像一段简单的代码，但我很难过为什么事情没有正常工作。 The onClick events showdiv(n) works just fine. onClick事件showdiv（n）工作得很好。 But the onClick event hidediv() does not. 但onClick事件hidediv（）没有。 What's weird is that if I type "hidediv(1)" on the Firebug console, the javascript statement works just fine. 有点奇怪的是，如果我在Firebug控制台上输入“hidediv（1）”，那么javascript语句就可以了。 But the js code is not executed when the div the event is attached to is clicked on. 但是，当单击附加事件的div时，不会执行js代码。 Here's the code: 这是代码： 

<script type="text/javascript">
function showdiv(n){
    switch(n){
        case 1:
        var div = document.getElementById("menucontent");
        div.setAttribute("class","menucontent_v");
        break;
        case 2:
        var div = document.getElementById("biographycontent");
        div.setAttribute("class","biographycontent_v");
        break;
        case 3:
        var div = document.getElementById("productscontent");
        div.setAttribute("class","productscontent_v");
        break;
        case 4:
        var div = document.getElementById("thankyoucontent");
        div.setAttribute("class","thankyoucontent_v");
        break;
        case 5:
        var div = document.getElementById("specialscontent");
        div.setAttribute("class","specialscontent_v");
        break;
        case 6:
        var div = document.getElementById("contactcontent");
        div.setAttribute("class","contactcontent_v");
        break;
        case 7:
        var div = document.getElementById("gallerycontent");
        div.setAttribute("class","gallerycontent_v");
        break;}}

function hidediv(n){
    switch(n){
        case 1:
        var div = document.getElementById("menucontent");
        div.setAttribute("class","menucontent_h");
        break;
        case 2:
        var div = document.getElementById("biographycontent");
        div.setAttribute("class","biographycontent_h");
        break;
        case 3:
        var div = document.getElementById("productscontent");
        div.setAttribute("class","productscontent_h");
        break;
        case 4:
        var div = document.getElementById("thankyoucontent");
        div.setAttribute("class","thankyoucontent_h");
        break;
        case 5:
        var div = document.getElementById("specialscontent");
        div.setAttribute("class","specialscontent_h");
        break;
        case 6:
        var div = document.getElementById("contactcontent");
        div.setAttribute("class","contactcontent_h");
        break;
        case 7:
        var div = document.getElementById("gallerycontent");
         div.setAttribute("class","gallerycontent_h");
        break;}}    
</script>
</head>
<body>
<div id="background" class="containerbg">
<img id="background" src="background.jpg" class="bgimg">
</div>

<div id="menuofservices" class="menuofservices" onClick="showdiv(1);"></div>
<div id="menucontent" class="menucontent_h">
    <div id="goawaymenu" class="goaway" onClick="hidediv(1);"><img src="closex.jpg" width="30px" height="30px"></div>
    <div id="menutitle" class="menutitle"><h2>Menu of Services</h2></div>
    <div id="menutext" class="menutext"><p>
    <table width="270">
      <tr>
        <td><strong>Cuts</strong></td>
        <td></td>
      </tr>
      <tr>
        <td>Women</td>
        <td>$30</td>
      </tr>
      <tr>
        <td>Boys</td>
        <td>$15</td>
      </tr>
        <tr>
        <td>Girls (12 & under)</td>
        <td>$20</td>
      </tr>
      <tr>
        <td>Bang trim</td>
        <td>$7</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><strong>Color</strong></td>
        <td></td>
      </tr>
      <tr>
        <td>All over</td>
        <td>$50</td>
      </tr>
      <tr>
        <td>Retouch</td>
        <td>$45</td>
      </tr>
      <tr>
        <td>Full Highlight</td>
        <td>$68</td>
      </tr>
      <tr>
        <td>&nbsp;&nbsp;additional color</td>
        <td>$5</td>
      </tr>
      <tr>
        <td>Partial Highlight</td>
        <td>$52</td>
      </tr>
      <tr>
        <td>Simple Highlight (per foil)</td>
        <td>$5</td>
      </tr>
      <tr>
        <td>Men's Color</td>
        <td>$24</td>
      </tr>
      <tr>
        <td>Retouch & Highlight</td>
        <td>$75</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><strong>Wax</strong></td>
        <td></td>
      </tr>
      <tr>
        <td>Eyebrow</td>
        <td>$12</td>
      </tr>
      <tr>
        <td>Lip</td>
        <td>$7</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><strong>Makeup</strong></td>
        <td></td>
      </tr>
      <tr>
        <td>Application & Lesson</td>
        <td>$40</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><strong>Misc</strong></td>
        <td></td>
      </tr>
      <tr>
        <td>Shampoo & Style</td>
        <td>$16</td>
      </tr>
      <tr>
        <td>Shampoo & Flatiron</td>
        <td>$21</td>
      </tr>
      <tr>
        <td>Deep Conditioning Treatment</td>
        <td>$15</td>
      </tr>
      <tr>
        <td>Updo</td>
        <td>$45</td>
      </tr>
    </table>
    </p> 
</div>
</div>

Everything seems to render OK, but the event does not fire and I'm at a total loss as to why. 一切似乎都很好，但事件并没有激发，我完全不知道为什么。

Here's the CSS: 这是CSS： 

@charset "utf-8";
/* CSS Document */

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    height: 768px;
    width: 1024px;
}

.containerbg {
    position: absolute;
    height: 768px;
    width: 1024px;
    z-index: 0;
}

.bgimg {
    height: 768px;
    width: 1024px;
}

.goaway {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    z-index: 3;
    cursor: pointer;
    position: absolute;
}




.menuofservices {
    position: absolute;
    border: thin solid #000;
    height:86px;
    width:257px;
    left: 600px;
    top: 560px;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.menucontent_h {
    position: absolute;
    border: thin solid #780C19;
    height: 600px;
    width: 300px;
    left: 360px;
    top: 100px;
    opacity: 0;
    z-index: 2;
    font-size: 11px;
    background-color: #dc7c87;
    text-align: left;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
    -webkit-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
}

.menucontent_v {
    position: absolute;
    border: thin solid #780C19;
    height: 600px;
    width: 300px;
    left: 360px;
    top: 100px;
    opacity: 1.0;
    z-index: 2;
    font-size: 11px;
    background-color: #dc7c87;
    text-align: left;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
    -webkit-box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.50);
}

.menutitle{
    position: absolute;
    text-align: center;
    width: 300px;
    height: 50x;
    z-index: 3;
    top: 0px;
    left: 0px;
}

.menutext{
    position: absolute;
    left: 0px;
    top: 50px;
    width: 300px;
    height: 500px;
    z-index: 3;
    background-color: #dc7c87;
    text-align: left;
}

1 个解决方案

解决方案1
 2  2012-03-31 20:19:43

我认为这是因为z-index将背景放在所有内容的前面，因此它背后的任何内容都无法获得点击

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 尝试从附加的HTML触发事件onclick - Trying to fire event onclick from appended html 为什么连接的 onclick 事件不会触发？ - Why does a connected onclick event not fire? 为什么在Javascript中设置的此onclick事件不会触发？ - Why does this onclick event set in Javascript not fire? 为什么在Firefox和Safari中无法触发onclick事件？ - Why does onclick event not fire in Firefox and Safari? React onClick事件不会触发setState - React onClick event does not fire setState 在Firefox中不会触发HTML拖动事件 - HTML drag event does not fire in firefox jQuery单击事件不会在“已加载”的HTML上触发 - jQuery click event does not fire on 'loaded' html 在Bootstrap下拉菜单中不会触发LinkBut​​ton OnClick事件 - LinkButton OnClick event does not fire in Bootstrap drop-down menu 提交按钮上的Internet Explorer 7 onclick事件不会触发 - Internet Explorer 7 onclick event on submit button does not fire 使用 ajax 更改 onClick 属性不会触发新事件？ - Changing onClick attribute with ajax does not fire the new event?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM