61,112
社区成员
发帖
与我相关
我的任务
分享DIV上放A标签，如何定位。
我有这样一段代码：
我本身有一个DIV,DIV有onClick事件。
然后我想在DIV中放入一个A标签，但是A标签是在DIV中的，所以我在点击A标签时，DIV的onClick事件也会触发，所以我想把A标签拿出来绝对定位在 DIV的某个位置（如果A标签在内部不触发DIV的onClick更好）。
DIV onClick事件 和 A link 是两个页面。
我本身有一个DIV,DIV有onClick事件。
然后我想在DIV中放入一个A标签，但是A标签是在DIV中的，所以我在点击A标签时，DIV的onClick事件也会触发，所以我想把A标签拿出来绝对定位在 DIV的某个位置（如果A标签在内部不触发DIV的onClick更好）。
DIV onClick事件 和 A link 是两个页面。
<script type="text/javascript">
function <%= RoomDiv.ClientID %>openDetail()
{
$.XYTipsWindow({
___title: "详细信息",
___content: "iframe:../Controls/BuildingControl_RoomDisplay.aspx",
___width: "400",
___height: "300",
___drag: "___boxTitle",
___showbg: true,
___offsets: "middle-top"
});
}
</script>
<div id="RoomDiv" runat="server" class="DisplayDiv" onclick="">
<div class="ONLineEnergyWin">
<a onclick="其他弹框方法">
<asp:Label ID="Label1" runat="server"></asp:Label>
</a>
</div>
other
</div>
...全文
请发表友善的回复…
发表回复
名字委婉点 2013-12-20
- 打赏
- 举报
还是有点问题，所以我换了个方式
因为之前是点击DIV区域内任何东西都会弹详细框， 而我的需求还是点DIV区域内任务东西都可以弹框，唯独点DIV内的A标签不能弹。
但是按照9楼的第二个方法，现在我只能点击到DIV的边框也就是DIV本体，才能弹出详细框。
我又改了一下，改成如果点击的是A标签，或者SPAN标签，就return。
现在达到了我的目的：点击DIV区域内除A标签外的任何东西都会弹详细框。点击A标签弹的是别的框。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>绝对定位相对定位</title>
<style>
.fj1 { width: 150px; position: relative; height: 150px; border: 1px solid #000; background: #999; margin: 0 auto; }
</style>
<script>
function aClick(){
alert("a");
return false;
}
function divClick(div){
if(window.event.srcElement.tagName=="SPAN")
{
return;//判断如果点击的是A链接，就不弹详细框
}
alert("div");
}
</script>
</head>
<body>
<div onclick="divClick();" class="fj1">
<div >
<a onclick="aClick();"><SPAN>我是A标签</SPAN></a>
</div>
</div>
</body>
</html>
名字委婉点 2013-12-19
- 打赏
- 举报
function click(e){
preventDefault(e);//这句加在A标签弹框前面，就只弹DIV的框。 如果加在A弹框的后面，DIV和A的框都弹出来了。
}
张运领 2013-12-19
- 打赏
- 举报
//假设，你A上绑定的函数是click
function click(e){
preventDefault(e);//在函数最后，绑定这个。如果你这个函数有传入参数的话，那就把这个函数，再次绑定到A标签上。如果你是onclick="click(参数1,参数2);preventDefault(e);",那就这样绑两个。最好还是click不传其他参数，直接把这个函数，写在click内部。
}
function preventDefault(e){
//组织继续冒泡的函数
e = e || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}张运领 2013-12-19
- 打赏
- 举报
你可以在点击A标签触发的函数里，添加一个阻止事件继续冒泡的代码。
你可以搜搜，查些资料，看是如何阻止冒泡的。
名字委婉点 2013-12-19
- 打赏
- 举报
<script>
function aClick(){
alert("a");
return false;
}
function divClick(div){
if(div !== window.event.srcElement){
return;
}
alert("div");
}
</script>
<div onclick="divClick(this);">
<a onclick="aClick();">test</a>
</div>
名字委婉点 2013-12-19
- 打赏
- 举报
是这个意思，哈哈哈。
我在研究研究，
allali 2013-12-19
- 打赏
- 举报
<script>
function aClick(){
alert("a");
return false;
}
function divClick(div){
if(div !== window.event.srcElement){
return;
}
alert("div");
}
</script>
<div onclick="divClick(this);">
<a onclick="aClick();">test</a>
</div>
张运领 2013-12-19
- 打赏
- 举报
<a onclick="其他弹框方法">
你加在这个里面试试。
你函数里面写，那个e你是没有定义的。
allali 2013-12-19
- 打赏
- 举报
<script>
function aClick(){
alert("a");
return false;
}
function divClick(){
if(window.event.currentTarget !== window.event.srcElement){
return;
}
alert("div");
}
</script>
<div onclick="divClick();">
<a onclick="aClick();">test</a>
</div>
名字委婉点 2013-12-19
- 打赏
- 举报
还是不行，两个一起弹出来了
<script type="text/javascript">
function <%= RoomDiv.ClientID %>openDetail()
{
$.XYTipsWindow({
___title: "详细信息",
___content: "iframe:../Controls/BuildingControl_RoomDisplay.aspx?RoomBindingDataSeqId=<%=SeqId %>",
___width: "400",
___height: "300",
___drag: "___boxTitle",
___showbg: true,
___offsets: "middle-top"
});
}
function urlSki(MaterCode, MaterName, MaterType, Unit, TypeName, KeyB, KeyC, IsReal, autoMatic) {
var win = window.open("../../View/Energyfile/FrmONLineEnergy.aspx?from=FrmONLineEnergy&MeatrCode=" + escape(MaterCode)
+ "&MaterName=" + escape(MaterName)
+ "&MaterType=" + escape(MaterType)
+ "&Unit=" + escape(Unit)
+ "&TypeName=" + escape(TypeName)
+ "&KeyB=" + escape(KeyB)
+ "&KeyC=" + escape(KeyC)
+ "&Automatic=" + escape(autoMatic)
+ "&IsReal=" + escape(IsReal)
+ "&LinkName=" + escape(MaterName)
+ "&LinkCode="
+ "&LinkModel=1", 'ONLineEnergyWin', 'height=600, width=950, top=0,left=0, toolbar=no, menubar=no, scrollbars=auto, resizable=yes,location=no, status=no');
win.focus();
stopPropagation(e);
}
function stopPropagation(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
</script>
<div id="RoomDiv" runat="server" class="DisplayDiv" onclick="">
<div class="ONLineEnergyWin">
<a onclick="其他弹框方法">
<asp:Label ID="Label1" runat="server"></asp:Label>
</a>
</div>
other
</div>
张运领 2013-12-19
- 打赏
- 举报
function stopPropagation(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}张运领 2013-12-19
- 打赏
- 举报
我晕，发错代码了
刚发的那个是阻止默认东西。。
换个代码，真是sorry
function stopPropagation(e){
e = e || windwo.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}