buttons with no href, onclick etc

问题

Lately, I've been seeing a lot of sites that have clickable objects that don't have any hrefs or onclicks in their html code. I also tried alerting their href, onclick, onmousedown, onmouseup attributes but it only says "undefined". I do notice that there's a lot of complicated javascript in these pages.

one site in particular baffles me: http://www.sharenator.com/Boy_Teaches_His_Puppy_How_to_Eat/#/doggy_01_Boy_Teaches_His_Puppy_How_to_Eat-0.html

It's actually pretty good. The buttons aren't selectable as well. The ids of the buttons are nextBtn, nextBtn2, prevBtn and prevBtn2.

Anybody has any idea how to implement this?

回答1:

You can use jQuery's .click(callback) function (http://api.jquery.com/click/) or .delegate(selector, 'click', callback) (prior to jQuery 1.7) and .on('click', selector, callback) (jQuery 1.7+) or .bind('click', callback).

Thanks to Anthony Grist for pointing out that .live() is now deprecated :)

As so:

<button id="clickable">Click Me!!</button>

Then target the button with jQuery:

$("#clickable").click(function(){
    // Send user to this link
    location.href = "http://www.takemehere.com";
});

You can read more about this on the link I gave, and on jQuery's homepage.

UPDATE

The actual page handles this with:

$('#prevBtn').mousedown (onBackward);

Which would onmousedown call:

function onBackward () {
    showImg (currentId - 1);
}

The use of arrow keys:

 $(document).keyup (function (event) {
    var activeElement = document.activeElement.tagName;
    if (activeElement == 'INPUT' || activeElement == 'TEXTAREA') return;
    //alert (window.location.pathname);

    if (event.keyCode == 39) onForward();
    else
    if (event.keyCode == 37) onBackward();
});

See http://www.sharenator.com/js/slideshow.js for the source code of the slideshow.

回答2:

You could try using the jQuery ui library - this can create buttons in the way you specify.

jQuery UI

回答3:

The event handlers are probably bound using a Javascript framework such as jQuery. They don't use the onclick property of the DOM element. See this jsFiddle for an example of binding a click event handler to a button with jQuery, then click the button to see the value of onclick for that button (displays as null in FF 9).

回答4:

With javascript, find the element and give it an onClick event handler. e.g.:

var myElement = document.body;  // or document.getElementById(...), etc.
myElement.onclick = function(event) {alert(event);}

This will avoid showing anything in the HTML, and is how the website you linked does it (there is no other way to define behavior... except maybe esoteric CSS).

回答5:

With javascript. Here's an example:

<a id="uniqueId" href="#">Button</a>

<script>
    var button = document.getElementById('uniqueId');
    button.onclick = function(e) {
        alert("clicked!");
    }
</script>

回答6:

the click functions may be initialized in js, for example, $("#nextBtn").click(function);

来源：https://stackoverflow.com/questions/8816916/buttons-with-no-href-onclick-etc

标签

javascript

ajax

onclick

href