如果div的边框被点击，防止对div的点击操作

我正尝试用HTML，CSS和Javascript构建Simon游戏的复制品。设计我是隔靴搔痒的最终状态，但我在的地方有基本的布局：如果div的边框被点击，防止对div的点击操作

每个彩色按钮（绿，红，黄，蓝）具有各自的单击事件，我测试他们与console.log语句。

下面是从代码中的相关章节：

$(document).ready(function() { 
 
    $('.center-buttons').click(function() { 
 
     event.stopPropagation(); 
 
     console.log("Inner Click!"); 
 
    }); 
 
    
 
    $('#top-left').click(function() { 
 
     console.log('left click.'); 
 
    }); 
 
    $('#top-right').click(function() { 
 
     console.log('right click.'); 
 
    }); 
 
    $('#bottom-left').click(function() { 
 
     console.log('bleft click.'); 
 
    }); 
 
    $('#bottom-right').click(function() { 
 
     console.log('bright click.'); 
 
    }); 
 
});

.main-area { 
 
    height: 700px; 
 
    width: 700px; 
 
    border-radius: 50%; 
 
    background-color: ; 
 
    margin: 0px auto; 
 
    padding: 20px; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    top: -5px; 
 
} 
 

 
.center-buttons { 
 
    height: 370px; 
 
    width: 370px; 
 
    border: 15px solid #444; 
 
    border-radius: 50%; 
 
    background-color: black; 
 
    margin: 0px auto; 
 
    position: relative; 
 
    top: -550px; 
 
} 
 

 
#top-row { 
 
    display: flex; 
 
} 
 

 
#bottom-row { 
 
    display: flex; 
 
} 
 

 
.main-button { 
 
    height: 310px; 
 
    width: 310px; 
 
    border: 20px solid #444; 
 
} 
 

 
#top-left{ 
 
    background-color: #00994d; 
 
    border-radius: 100% 0 0 0; 
 
    right: 50%; 
 
    margin: 0px 5px 5px 0px; 
 
} 
 

 
#top-right{ 
 
    background-color: #990000; 
 
    left: 50%; 
 
    border-radius: 0 100% 0 0; 
 
    margin: 0px 0px 5px 5px; 
 
} 
 

 
#bottom-left { 
 
    background-color: yellow; 
 
    left: 50%; 
 
    border-radius: 0 0 0 100%; 
 
    margin: 5px 5px 0px 0px; 
 
} 
 

 
#bottom-right { 
 
    background-color: #004d99; 
 
    left: 50%; 
 
    border-radius: 0 0 100% 0; 
 
    margin: 5px 0px 0px 5px; 
 
}

<div class = 'main-area'> 
 
    <div class = 'wrapper'> 
 
     <div id = 'top-row'> 
 
      <div id = 'top-left' class = 'main-button'></div> 
 
      <div id = 'top-right' class = 'main-button'></div> 
 
     </div> 
 
     <div id = 'bottom-row'> 
 
      <div id = 'bottom-left' class = 'main-button'></div> 
 
      <div id = 'bottom-right' class = 'main-button'></div> 
 
     </div> 
 
    </div> 
 

 
    <div class = 'center-buttons'></div> 
 
</div>

在CSS，每个彩色按钮有一个厚厚的灰色边框。

主要问题：当单击任何按钮的边框时，是否有办法防止各个按钮发生单击事件。

谢谢。

来源

2015-12-30 athul777

代替边框，请使用边距。保证金不被视为元素的一部分。 – Barmar

你打算如何与父母分离边界？ – Hemal

它只有当你有一个'Parent'元素，并且里面有一个带有填充的''''元素，所以它看起来像边框。然后，当“父”被点击，你只是禁用其“孩子”。 – Hemal

我试图用我自己的HTML和CSS来实现，但是您可以相应地进行更改。

如果点击了.parent，我记下它，然后点击.child检查它。

WORKING FIDDLE

HTML

<div class=parent> 
<div class=child> 

</div> 
</div>

CSS

.parent{ 
    display:table-cell; 
    width:300px; 
    height:300px; 
    vertical-align:middle; 

    text-align:center; 
    padding:15px; 
    background-color:red 
} 
.child{ 
    display:inline-block; 
    width:300px; 
    height:300px; 
    background-color:blue 
}

JQUERY

$(document).ready(function(){ 
    var flag=false; 
    $(".parent").click(function(){ 
    flag=true; 
    }); 
    $(".child").click(function(e){ 
    if(flag==false){ 
     alert("CHILD IS ALIVE"); 
    } 
    }); 
});

来源

2015-12-30 05:59:11 Hemal

谢谢！我想我可以添加一个四分之一圈的父div到每个按钮！ – athul777

是的，这可能是一个好主意，你只需要使用亲子场景并通过css改变形状来达到你的需要。 – Hemal

@ athul777关于此的CSS并不完美，但也许它会帮助http://codepen.io/alex-wilmer/pen/mVOxEz?editors=110只是做了左上角的四分之一圆圈为例 – azium

实际上，border不是另一个html元素，但它属于div本身。所以，如果单击事件应用于其div，则无法避免点击边框。如果你真的需要这个宽度的边框，你可以在一个div里面有一个div。保持外部div的背景颜色为边框颜色和div内部的颜色为红色/绿色/蓝色/黄色。然后，您可以在内部div上应用点击事件来解决您的问题

来源

2015-12-30 06:02:17 anand

如果div的边框被点击，防止对div的点击操作

回答

相关问题