SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery and click elements

    I try to make a simple button with jQuery that executes some javascript when clicked. I know there are many articles covering this but I still have some questions.
    I first worked with an a element and put onlick in the href parameter, this was the wrong way to do it, so I changed it and later on I had an idea that made everything really easy (designwise). I made a div (in most cases) and with jQuery I coded that if the div was clicked, some scriptwork should run, like this;

    Code:
    <div id="clickMe">Click me</div>
    
    <script>
    $("#clickMe").click(function () {
    /* some script */
    });
    </script>
    This seemed to be a good solution, but is it really? If it is, then there's another problem.
    When I click such 'link' more than once I begin to select/highlight elements on my page. Normal behaviour ofcourse, but how do I stop this?

    Thank you in advance.

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by xtaste View Post
    I try to make a simple button with jQuery that executes some javascript when clicked.
    Unless you must use jquery, I would suggest ditching it and use just plain javascript.

    Code JavaScript:
    <button id="btn1">Click me</button>
     
    <script type="text/javascript">
           document.getElementById("btn1").onclick=function(){alert('Button was clicked');}
    </script>

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the reply!
    I must use jQuery (it will take a lot more codelines to do it with plain javascript and jQuery makes it easier to read/maintain), so that's not really an option.
    But still, wouldn't you have the same problem as I described in my first post? That you click the button more times and you select/highlight the text near the button?
    I thought about disabling highlighting text, but that would mean the user wouldn't be able to select anything at all. So, how do I do this?

    Thank you in advance.

  4. #4
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by xtaste View Post
    (it will take a lot more codelines to do it with plain javascript and jQuery makes it easier to read/maintain),
    What is the first "it" you are referring to?

    If you go look at the amount of code jquery runs in the "background" to perform a given function, I'll bet that just about on every occassion it will be much, much more than the amount of code required to perform the same function using plain javascript. There is nothing you can do with jquery that cannot be done with plain javascript.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is; Handeling cookies, some image altering, creating animations and cross-browser support.
    I know jQuery is javascript but sometimes it just hands shortcuts I like. So, I won't move away from jQuery.

    But my question was if you wouldn't have the same problem (highlighting text and so on)? And what can I do about the problem?

  6. #6
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by xtaste View Post
    But my question was if you wouldn't have the same problem (highlighting text and so on)?
    I haven't tried it. Copy and paste the code and see if you get the problem.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it gives the same problem. Not when you use the <button> element or call an alert window ofcourse but with this it gives the same prob:

    Code:
    <div id="clickMe">Click me</div>
    <div id="temp"></div>
    
    <script type="text/javascript">
       document.getElementById("clickMe").onclick=function(){
          document.getElementById("temp").innerHTML = "A very cool site!";
       }
    </script>
    So am I forced to use the button element or is there a way using a div?

    Thank you in advance.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Max Height View Post
    If you go look at the amount of code jquery runs in the "background" to perform a given function, I'll bet that just about on every occassion it will be much, much more than the amount of code required to perform the same function using plain javascript. There is nothing you can do with jquery that cannot be done with plain javascript.
    You seem to like forcing this opinion on many people who come here for jQuery help, in a manner that doesn't seem to fit in with how we try to help people here.
    I hope that you can improve on how you help people here.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by xtaste View Post
    When I click such 'link' more than once I begin to select/highlight elements on my page. Normal behaviour ofcourse, but how do I stop this?
    There are two solutions that can be used here.

    The first solution is for modern web browsers which disables the highlight only on the specific area that you have in mind.

    Code css:
    #clickMe {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    The other solution is to use scripting to disable the highlight when the above modern web browser solution isn't effective, on IE for example.

    Code javascript:
    function clearSelection() {
        if(document.selection && document.selection.empty) {
            document.selection.empty();
        } else if(window.getSelection) {
            var sel = window.getSelection();
            sel.removeAllRanges();
        }
    }
    $("#clickMe").click(function () {
        clearSelection();
        /* some script */
    });

    Both techniques can be used at the same time without interfering with each other.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, thank you! That helped, I will fully test this tomorrow and I'll let you know the results.

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The solution works for me, thank you!


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
  •