SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery: Clicking anywhere but on a particular A tag

    Hi

    I have a question in jQuery.

    I have a webpage with lots of links, buttons, text etc. The page also has an <A class="mylink" HREF="#">Click here</a> tag.

    What exactly I want is, if I click anywhere on the page, button, text or any other <A></A> tag on that page except the A tag that has the class="mylink", an alert() should popup.

    I tried the following but I still see the alert when I click on the <A class="mylink" HREF="#">Click here</a> tag.


    Code:
    <script>
    
    $(document).ready(function(){
    
       $(document).click(function(){
            alert(123);
      });
    
    
    });
    
    </script>
    Any neat solution for this?


    Thanks in advance.

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cancer10 View Post
    Any neat solution for this?
    You can do this without jquery.

    With this demo code clicking anywhere on "myDiv" except on it's 2 child <p>'s will fire an alert(). It's only a couple of minor tweaks to make it suit your situation.

    Code JavaScript:
         <script type="text/javascript">
                window.onload=function(){
                    var oP1 = document.getElementById('myP1');
                    var oP2 = document.getElementById('myP2');
                    stopBubbling(oP1);
                    stopBubbling(oP2);
                    function stopBubbling(childDiv){
                        if(childDiv && childDiv.addEventListener){
                            childDiv.addEventListener('click',function(event){
                                event.cancelBubble=true;
                                if(event.stopPropagation) event.stopPropagation();
                            },false);
                        }else if(childDiv && childDiv.attachEvent){
                            childDiv.attachEvent('onclick',function(event){
                                event.cancelBubble=true;
                                if(event.stopPropagation) event.stopPropagation();
                            }
                        );
                        }else{
                            childDiv.onclick=function(event){
                                event.cancelBubble=true;
                                if(event.stopPropagation) event.stopPropagation();
                            }
                        }
                    }
                }
            </script>

    Code HTML4Strict:
        <div id="myDiv"  onclick="alert('div clicked');">
            div 1
            <p id="myP1">para 1</p>
            <p id="myP2">para 2</p>
            more div 1
        </div>

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    For jQuery:
    Code JavaScript:
    <a href="#" class="noAlert">Click</a>
    <a href="#" class="noAlert">Click</a>
    <a href="#" class="noAlert">Click</a>
    <a href="#" class="mylink">I haz no alert</a>
    <a href="#">Click</a>
    <a href="#">Click</a>
    <a href="#" class="mylink">I haz no alert either</a>
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
    	$('a:not(.mylink)').click(function() {
    		alert('Alerting!');
    	});
    </script>

  4. #4
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys

    Thanks for your replies.

    I will try out these examples.

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    For jQuery:
    Code JavaScript:
    <a href="#" class="noAlert">Click</a>
    <a href="#" class="noAlert">Click</a>
    <a href="#" class="noAlert">Click</a>
    <a href="#" class="mylink">I haz no alert</a>
    <a href="#">Click</a>
    <a href="#">Click</a>
    <a href="#" class="mylink">I haz no alert either</a>
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
    	$('a:not(.mylink)').click(function() {
    		alert('Alerting!');
    	});
    </script>

    Hi Again

    I tried your example, its alerting only when I click on the target A tag. It should alert only if not clicked on the A tag. I am using the following example:


    Code:
    <script src="jquery.js"></script>
    <script>
    $(function () { 
        
    	$('a:not(.mylink)').click(function() {
    		alert('Alerting!');
    	});
    });  
    </script>
    
    <A class="mylink" HREF="#">Click here</a> tag.
    <A class="mylink2" HREF="#">Click here</a> tag.

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The non jquery demo code works fine.

  7. #7
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yea but its too lengthy

  8. #8
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem, but at least it works .

    If you look at the "back end" jquery code, you'll probably find that it's even lengthier.

    In the mean time, hopefully someone else will come along before too long to help you your jquery solution

  9. #9
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Untested, but I don't see why it wouldn't work:

    Code JavaScript:
    $('*:not(a.mylink)').click(function() {
    	alert('Alerting!');
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •