Android : Android not acknowledging ontouchend

So, it's silly, but my friend made a GitHub issue (https://github.com/isuPatches/RockThePatch/issues/311) to improve my site with "electrical ducks" being a wise guy and thinking surely I would ignore it. Sssoooo...instead I went ahead and added a page https://www.rockthepatch.com/ducks.php.

The issue I seem to be having is for mobile devices, the onclick and ontouchend events either aren't getting fired or my approach is incorrect for mobile.

Here's where I attach the listeners to the element:

function watchDucks() 
{
    var duck1 = document.getElementById('duck1-holder');
    var duck2 = document.getElementById('duck2-holder');

    if(duck1 != null && duck2 != null)
    {
        duck1.addEventListener("touchend", handleDuck1, false);
        duck2.addEventListener("touchend", handleDuck2, false);
        duck1.addEventListener("click", handleDuck1, false);
        duck2.addEventListener("click", handleDuck2, false);
    }
}

And my functions to toggle the ducks:

function handleDuck1(event) 
{
    event.preventDefault();
    toggleQuack(1);
}   

function handleDuck2(event) 
{
  event.preventDefault();
  toggleQuack(2);
}   

function toggleQuack(duckId){
    var quack = document.getElementById('quack' + duckId);
    var quackButton = document.getElementById('duck' + duckId + '-button');
    if(quack.style.display == "none")
    {
        quack.style.display = "block";
        quackButton.innerHTML = "<strong>Unquack me!</strong>";
    }
    else
    {
        quack.style.display = "none";
        quackButton.innerHTML = "<strong>Quack me!</strong>";
    }
}

And the elements as seen by Chrome from view source:

<div id="duck1-holder" class="float-left">
      <p id="quack1" style="display:none;"><img src="/images/quack-quack.png" alt="Quack! Quack!" title="Quack! Quack! 1" style="width:240px;margin:5px 10px;" /></p>
      <p id="duck1"><img src="/images/bionic-duck.png" alt="Mechanical Duck 1" title="Mechanical Duck 1" style="width:240px;margin:5px 10px;" /></p>
      <p id="duck1-button" class="error"  style="font-weight:bold;">Quack me!</p>
</div>

<div id="duck2-holder" class="float-left">
      <p id="quack2" style="display:none;"><img src="/images/quack-quack.png" alt="Quack! Quack!" title="Quack! Quack! 2" style="width:240px;margin:5px 10px;" /></p>
      <p id="duck2"><img src="/images/bionic-duck.png" alt="Mechanical Duck 2" title="Mechanical Duck 2" style="width:240px;margin:5px 10px;" /></p>
      <p id="duck2-button" class="error" style="font-weight:bold;">Quack me!</p>
</div>

If anyone has some insight that would be great, I've seen a lot of similar threads but haven't come across a solution that works for me yet.