如何禁用鼠标左键单击使用javascript的particluar div？
问题描述：
我想禁用特定的div的左键单击。我曾尝试以下方法，但它不是为我工作：如何禁用鼠标左键单击使用javascript的particluar div？
$('[id$=div]').onclick=function(){xajax_addFunction()};
这是的document.ready（）。它会抛出错误xajax_addFunction（）未定义。请帮帮我。 我的代码是：
的Javascript用于翻转：
<script type="text/javascript">
document.oncontextmenu = new Function("return false")
var myArray = [];
var Book_Image_Width = screen.width;
var Book_Image_Height = screen.height;
$(document).ready(function (e) {
var BookId = getParameterByName('BookID');
ShowImages(BookId);
});
function divActive(divId) {
var div = document.getElementById(divId);
// div.style.backgroundImage = "url(img/gif/button_add.gif)";
div.style.cursor = "pointer";
div.onclick = function() { xajax_addFunction() };
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if (results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
function ShowImages(QueryString) {
var Append = '';
$.ajax({
type: "POST",
url: "FlipBook.aspx/Test",
data: "{QueryString:'" + QueryString + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
ImageBook(data);
}
});
}
//var firstimg = $('[id$=]')
$('[id$=divBook]').live('click', function (e) {
alert('hi');
e.preventDefault();
return false;
});
// 7 variables to control behavior
var Book_Image_Width = 324;
var Book_Image_Height = 500;
var Book_Border = false;
var Book_Border_Color = "gray";
var Book_Speed = 15;
var Book_NextPage_Delay = 2000;
var Book_Vertical_Turn = 0;
var skip = 0;
var Book_Image_Sources;
var B_LI, B_MI, B_RI, B_TI, B_Angle = 0, B_CrImg = 6, B_MaxW, B_Direction = 1;
var B_MSz, B_Stppd = false;
var B_Permanent_Stppd = false;
var lastImgIndex = 1;
var flipStopPoint;
function ImageBook(data) {
var test = data.d.split(',').slice(0, -1);
for (var i = 0; i < test.length; i++) {
myArray[i] = test[i];
}
myArray = test;
Book_Image_Sources = myArray;
B_Pre_Img = new Array(Book_Image_Sources.length);
flipStopPoint = ((Book_Image_Sources.length/4) - 1) * 50;
/**Swap Array**/
for (i = 0; i < Book_Image_Sources.length; i += 2) {
if (i > 3) {
if (i != skip) {
temp = Book_Image_Sources[i];
Book_Image_Sources[i] = Book_Image_Sources[i + 2];
Book_Image_Sources[i + 2] = temp;
skip = i + 2;
}
}
}
if (document.getElementById) {
for (i = 0; i < Book_Image_Sources.length; i += 2) {
B_Pre_Img[i] = new Image();
B_Pre_Img[i].src = Book_Image_Sources[i]
}
Book_Div = document.getElementById("divBook");
//Book_Div.removeEventListener('click')
B_LI = document.createElement("img"); Book_Div.appendChild(B_LI);
B_RI = document.createElement("img"); Book_Div.appendChild(B_RI);
B_MI = document.createElement("img"); Book_Div.appendChild(B_MI);
B_LI.style.position = B_MI.style.position = B_RI.style.position = "absolute";
B_LI.style.zIndex = B_RI.style.zIndex = 0; B_MI.style.zIndex = 1;
B_LI.style.top = (Book_Vertical_Turn ? Book_Image_Height + 1 : 0) + "px";
B_LI.style.left = 0 + "px";
B_MI.style.top = 0 + "px";
B_MI.style.left = (Book_Vertical_Turn ? 0 : Book_Image_Width + 1) + "px";
B_RI.style.top = 0 + "px";
B_RI.style.left = (Book_Vertical_Turn ? 0 : Book_Image_Width + 1) + "px";
B_LI.style.height = Book_Image_Height + "px";
B_MI.style.height = Book_Image_Height + "px";
B_RI.style.height = Book_Image_Height + "px";
B_LI.style.width = Book_Image_Width + "px";
B_MI.style.width = Book_Image_Width + "px";
B_RI.style.width = Book_Image_Width + "px";
if (Book_Border) {
B_LI.style.borderStyle = B_MI.style.borderStyle = B_RI.style.borderStyle = "solid";
B_LI.style.borderWidth = 1 + "px";
B_MI.style.borderWidth = 1 + "px";
B_RI.style.borderWidth = 1 + "px";
B_LI.style.borderColor = B_MI.style.borderColor = B_RI.style.borderColor = Book_Border_Color
}
B_LI.src = B_Pre_Img[0].src;
B_LI.lnk = Book_Image_Sources[1];
B_MI.src = B_Pre_Img[2].src;
B_MI.lnk = Book_Image_Sources[3];
B_RI.src = B_Pre_Img[4].src;
B_RI.lnk = Book_Image_Sources[5];
B_LI.onclick = B_MI.onclick = B_RI.onclick = B_LdLnk;
//B_LI.onmouseover = B_MI.onmouseover = B_RI.onmouseover = B_Stp;
//B_LI.onmouseout = B_MI.onmouseout = B_RI.onmouseout = B_Rstrt;
setTimeout(function() { BookImages(); }, 2000);
}
}
function BookImages() {
if (!B_Stppd && lastImgIndex < flipStopPoint) {
lastImgIndex = lastImgIndex + 1;
if (Book_Vertical_Turn) {
B_MSz = Math.abs(Math.round(Math.cos(B_Angle) * Book_Image_Height));
MidOffset = !B_Direction ? Book_Image_Height + 1 : Book_Image_Height - B_MSz;
B_MI.style.top = MidOffset + "px";
B_MI.style.height = B_MSz + "px"
}
else {
B_MSz = Math.abs(Math.round(Math.cos(B_Angle) * Book_Image_Width));
MidOffset = B_Direction ? Book_Image_Width + 1 : Book_Image_Width - B_MSz;
B_MI.style.left = MidOffset + "px";
B_MI.style.width = B_MSz + "px"
}
B_Angle += Book_Speed/720 * Math.PI;
if (B_Angle >= Math.PI/2 && B_Direction) {
B_Direction = 0;
if (B_CrImg == Book_Image_Sources.length) B_CrImg = 0;
B_MI.src = B_Pre_Img[B_CrImg].src;
B_MI.lnk = Book_Image_Sources[B_CrImg + 1];
B_CrImg += 2
}
if (B_Angle >= Math.PI) {
B_Direction = 1;
B_TI = B_LI;
B_LI = B_MI;
B_MI = B_TI;
if (Book_Vertical_Turn) B_MI.style.top = 0 + "px";
else B_MI.style.left = Book_Image_Width + 1 + "px";
B_MI.src = B_RI.src;
B_MI.lnk = B_RI.lnk;
setTimeout("Book_Next_Delay()", Book_NextPage_Delay)
}
else setTimeout("BookImages()", 50)
}
else setTimeout("BookImages()", 50)
}
function Book_Next_Delay() {
if (B_CrImg == Book_Image_Sources.length) B_CrImg = 0;
B_RI.src = B_Pre_Img[B_CrImg].src;
B_RI.lnk = Book_Image_Sources[B_CrImg + 1];
B_MI.style.zIndex = 2;
B_LI.style.zIndex = 1;
B_Angle = 0;
B_CrImg += 2;
setTimeout("BookImages()", 50)
}
function B_LdLnk() { if (this.lnk) window.location.href = this.lnk }
function B_Stp() { B_Stppd = true; this.style.cursor = this.lnk ? "pointer" : "default" }
function B_Rstrt() { B_Stppd = false }
</script>
HTML代码：
<div id="divBook" style="position: relative">
<input type="hidden" runat="server" id="htmlHiddenImageOrder" />
</div>
我结合动态图像。
答
试试这个，
(function($){
$(document).ready(function() {
$("#divBook")
.mousedown(function (event) {
var clickVar = (navigator.appName == "Netscape" || navigator.appName == "Opera") ? 0 : 1;
if (event.button == clickVar) {
event.preventDefault();
$(this).unbind('click');
}
});
});
})(jQuery);
答
这里，这应该是一个稍微简单：
<style type='text/css'>
#innerDiv {
display:inline-block;
background-color: #999;
}
#outerDiv {
background-color: #444;
}
</style>
<div id='outerDiv'>
outerDiv: click works here
<div id='innerDiv'>innerDiv: click doesn't work here</div><br />
outerDiv: click works here</div>
<script type='text/javascript'>
$(function() { //short hand for window.onLoad or $(document).ready()
$('#outerDiv').on('mousedown', function (event) {
alert('outerDiv: mousebutton fired');
});
$('#innerDiv').on('mousedown', function (event) {
// all browsers except IE before version 9 // Internet Explorer before version 9
if ((('which' in event) && (event.which == 1)) || (('button' in event) && (event.button == 1))) {
alert ('innerDiv: Left button is pressed inside');
return false; //prevent bubbling and default action
} else {
alert('innerDiv: NOT-LEFT button is pressed inside');
}
});
});
</script>
如果左键点击在内部格，内格左键消息将激发和该事件将停止冒泡。如果在内部div内按下右侧按钮，'NOT-LEFT'警报消息将触发并且事件将冒泡。
我选择了return false;来防止默认操作并阻止事件冒泡。
首先，我想引导您阅读Dottoro Web Reference上有关鼠标事件的this页面，以便您了解事件对象以及为什么使用event.button和event.which。
接下来，here是描述点击鼠标时的事件顺序的页面。同样来自Dottoro Web Reference。您可以看到该事件可以取消，并且确实会冒泡到父节点。
最后，我想告诉你return false，event.preventDefault()，event.stopImmediatePropagation()，并event.stopPropagation()之间的区别，所以我会引导您到here找出差异。
干杯和良好的阅读。
几个笔记
您的代码甚至不是有效的JavaScript。首先解决语法错误。 – 2013-02-19 07:56:05
你想用这个做什么？不应该添加任何onclick本身足够的div？ – aug 2013-02-19 07:56:45
@aug实际上，这个div包含图像，我想当用户尝试点击它不会发生任何事情，因为它现在它在浏览器中带有完整路径的图像 – Ram 2013-02-19 07:59:05