How to disable Left Click of Mouse for a particluar div using javascript?

Question

I want to disable the left click for a particular div. I have tried the following way but its not working for me:

$('[id$=div]').onclick=function(){xajax_addFunction()};

It is document.ready(). it throws error that xajax_addFunction() is not defined. Please help me. MY code is:

Javascript used for flip:

<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 code is:

<div id="divBook" style="position: relative">
    <input type="hidden" runat="server" id="htmlHiddenImageOrder" />
</div>

I am binding the images dynamically.

Your code isn't even valid javascript. First fix the syntax error. — Florian Margaine, Feb 19 '13 at 07:56
What do you wish to achieve with this? Shouldn't not adding any onclick to the div suffice itself? — aug, Feb 19 '13 at 07:56
@aug ACTUALLY THIS div contains image and i want when user tries to click not it nothing will happen as now it bring the image with full path in browser — Ram, Feb 19 '13 at 07:59
Show an html code of that div and everything that is located inside of it. — Viktor S., Feb 19 '13 at 08:09
@FAngel http://stackoverflow.com/questions/14937464/please-help-me-to-work-the-following This question has all the code: — Ram, Feb 19 '13 at 08:15
I'm sorry, but you have a lot of code there. You should better find a part which is related to your problem and show it. Meanwhile I see only one place which may produce your issue: `B_LdLnk` try to remove everything from that function and check issue still exists. — Viktor S., Feb 19 '13 at 08:22
Well `xajax_addFunction` is not defined anywhere so it's logical to get an error. — iappwebdev, Feb 19 '13 at 08:33
@Simon i have found it here http://community.xajax-project.org/topic/8029/disable-leftclick-within-a-div/ — Ram, Feb 19 '13 at 08:58

Debasish Chowdhury · Answer 1 · 2013-02-19T09:45:12.120

0

Try this,

(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);

edited Feb 19 '13 at 09:45

answered Feb 19 '13 at 09:17

Debasish Chowdhury

188
2
12

Don't bother with using `alert('not allowed')` use `event.preventDefault()` instead. Otherwise good answer, and good for using *mousedown* event, as the *click* event isn't cancelable. – Klik Feb 19 '13 at 09:28
if i use the same code its working but if i m removing the alert('Not Allowed'); its not working – Ram Feb 19 '13 at 09:39
Ram, actually click event is firing before mousedown .. that's why it's not working. @TheWeirdNerd event.preventDefault() is not helping either :( – Debasish Chowdhury Feb 19 '13 at 09:40
@DebasishChowdhury so please let me know what more i can do to achieve this – Ram Feb 19 '13 at 09:43
@Ram Just made some changes .. please check – Debasish Chowdhury Feb 19 '13 at 09:45
@DebasishChowdhury have you seen my code its creating img tag using javascript can we make the same thing on img tag. might be it will work for us – Ram Feb 19 '13 at 09:48
@Debasish I can assure you `event.preventDefault()` does in fact work. I'm doing this on my phone so I cannot see your code that well. I know it works though because I've had to accomplish the same thing on my web page and after many painstaking hours of searching through documentation, I found that in the order of events that occur after a mouse button is clicked, `mousedown` is the first, and it **is** cancelable. However, `event.preventDefault()` won't prevent bubbling, to do that, include a `return false` or `event.stopImmediatePropagation` (not sure I spelled it right there) – Klik Feb 19 '13 at 09:49
check the last update .. hope it will work .. if not .. can you show a demo in js fiddle or elsewhere? – Debasish Chowdhury Feb 19 '13 at 09:50
@TheWeirdNerd thanks for the help.. i made some changes just a minute ago ... i think that's what you want – Debasish Chowdhury Feb 19 '13 at 09:52
@DebasishChowdhury ok just me attach my pages. – Ram Feb 19 '13 at 10:00

score 0 · Answer 2 · answered Feb 19 '13 at 20:35

Here, this should be a little simpler:

<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>

If the left button is clicked in the inner div, the inner div left button message will fire and the event will stop from bubbling up. If the right button is pressed inside the inner div the 'NOT-LEFT' alert message will fire and the event will bubble up.

I have chosen return false; to prevent the default action and stop the event from bubbling up.

First, I would like to direct you to reading this page from Dottoro Web Reference on mouse events so you can understand the event object and why I used both event.button and event.which.

Next, here is a page that describes the order of events when a mouse is clicked. Also from Dottoro Web Reference. You can see that the event in cancelable and it does bubble up to parent nodes.

Lastly I would like to let you know the difference between return false, event.preventDefault(), event.stopImmediatePropagation(), and event.stopPropagation() so I would direct you to here to find out the differences.

Cheers and good reading.

A few notes

How to disable Left Click of Mouse for a particluar div using javascript?

2 Answers2