我想禁用特定 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>
我动态绑定图像。
答案 0 :(得分：0)
试试这个，
(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);
答案 1 :(得分：0)
在这里，这应该更简单一点：
<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中单击了左按钮，则会触发内部div按钮消息并且事件将停止冒泡。如果在内部div内按下右键，则“不 - 左”。警报信息将会触发，事件将会冒出来。
我选择return false;来阻止默认操作并阻止事件冒泡。
首先，我想引导您阅读Dottoro Web Reference中有关鼠标事件的this页面，以便您了解事件对象以及我为何使用event.button和event.which。
接下来，here是一个页面，用于描述单击鼠标时的事件顺序。也来自Dottoro Web Reference。您可以看到该事件处于可取消状态，并确实冒泡到父节点。
最后，我想告诉您return false，event.preventDefault()，event.stopImmediatePropagation()和event.stopPropagation()之间的区别，以便我引导您here找出差异。
干杯和好读。
一些注意事项