How to disable right click on all the links of same class in js/jquery?

Question

Rails 4 + JS + jquery

How to disable right click from links which are using same class.

<% @schedule_hash.values.each do |schedule| %>
     <%= link_to "Cancellation policy", {:controller => 'web', :action => 'get_cancellation_policies', :operator_id => schedule["bus_schedules"].operator_id}, :onclick => "", :class => "canc_policy", :id => "canc_policy#{schedule["bus_schedules"].operator_id}", :remote => true %>
<% end %>

Suppose @schedule_hash.count = 7 then 7 times link will come with same class name.

so i am using this script

<script type="text/javascript">
$(document).ready(function(){
  document.getElementsByClassName('canc_policy')[0].oncontextmenu = new Function ("return false");
});

$(document).ready(function()
{
  $('.canc_policy').bind('click', function(e) 
  {
    if (e.metaKey || e.ctrlKey )
    {
      e.metaKey = e.ctrlKey;
      return false;
    }
})

$(".canc_policy").mousedown(function(e) {
   if( e.which == 2 ) {
    alert("New Tab is not Allowed.");
    return false;
   }
});
});
</script>

But this script is applicable on only first link rest 6 links right click is working. Is there any way without making unique class we can disable the right click on all the links with same class...

Answer 1

you could do:

$(document).ready(function(){
    $(".canc_policy").bind("contextmenu",function(){
        return false;
    });
}); 

document.getElementsByClassName('canc_policy')[0] selects only first element with canc_policy class, hence only first link is disabled for rightclick

Answer 2

    $(document).ready(function () {
        var elements = document.getElementsByClassName('canc_policy');
        for (var i = 0; i < elements.length; i++) {
            elements[i].addEventListener('contextmenu', function (e) { e.preventDefault(); }, false);
        }
    });